みなさんこんにちは。takatoです！
企業サイトやLPを作成していると地図を埋め込む作業が発生することがあります。
その際コーディングで地図を埋め込む方法がとても簡単だったので、記事にまとめてみなさんに教えたいと思います。
コーディングを仕事にしている方やこれからコーディングの勉強をしたい方の参考になれば幸いです。
webサイトに地図を入れる方法
webサイトに地図を入れる際、グーグルマップを使用します。
実はグーグルマップには地図を埋め込む際のコーディングをサポートしてくれる機能があるのです。
この機能を使用することで簡単にサイト上にグーグルマップを配置することが出来ます。下記の架空カフェサイトも同様に作成しました。
手順１
まずはグーグルマップを開き、位置したい場所を選択します。
今回は中目黒駅に設定します。
手順2
グーグルマップからコードを取得します。グーグルマップの共有を選択します。
地図を埋め込むを選択すると、地図のサイズを選ぶことが出来ます。
「HTMLをコピー」を選択して、コードを取得します。
手順3
取得したコードをhtmlで貼り付ければ完成です。とても簡単ですね。
ちなみに今回使用した中目黒駅の地図のコードを貼り付けました。下記のように地図が表示されます。
グーグルマップからサイト地図のコードを取得し貼り付けるだけでサイトに地図を取り込むことが出来ます。
サイト作成時に地図を取り入れたいときはこのようなやり方で進めてみてください 。
プログラミングを勉強するには
webサイトの勉強を独学で行なっている方はいませんか？
僕も初めは独学で勉強していましたが、エラーが生じた際に原因と解決策に多くの時間を取られ、なかなか勉強が進みませんでした。そこで僕は下記参考書を購入し勉強しました。
説明がとてもわかりやすく、コードの内容を理解しながら勉強することが出来ました。
とはいえ、参考書で勉強してもエラーが生じるのがプログラミングです。
プログラミングの勉強で大切なことは、エラーが生じた際いかに早く解決できるかです。エラーをスムーズに解決できないと勉強が進みません。
自分の周りにプログラミングができる人がいればその人に質問することをお勧めします。もしいない場合、プログラミングスクールに通うのもありです。
テックキャンプは完全オンラインで勉強することが出来、質問回数の上限がありません。さらに質問可能時間が13~22時と長いのが特徴です。
テックキャンプでは無料でオンラインカウンセリングを行なっております。もし興味のある方はお話だけでも聞いてみると良いと思いますよ！