ブログ

google map 簡単設置&設定編

2018.03.23

今回は、ホームページ制作では必須のgoogle mapについて書こうと思います。

まずはホームページ内への設置から。

ホームページに地図を表示するのはハードルが高いんじゃ…と思いがちですが、google mapには設置の方法がいくつかあり、どう使いたいかによって設置方法を選べます。

設置法① リンク&iframeで簡単設置!

まずは一番簡単でお手軽な方法の紹介です。

google mapへアクセスし、自分のホームページに埋め込みたい場所を検索し、マップ上に表示させておきます。

 


一番手間をかけずに表示をするには、この状態から左のメニューの中にある「共有」を選択し、「リンクを共有」をクリックしてURLを取得する方法です。

あとはhrefでリンクを貼れるのですが、これではリンクをクリックすると別タブで大きな地図が開いてしまううえに地図のリンクかどうかがわからなくなってしまいます。

 

やっぱり自分のホームページの中に地図が見えるように入れたい!という方はiframeを使ってみましょう。

先ほどと同じく「共有」をクリックし、「地図を埋め込む」を選択します。

するとすぐ下に地図が表示されました。

この状態がそのまま表示されますので、あとはURLをコピーして自分のホームページ上の表示させたい場所に張り付けるだけです。

 

ちなみに、簡単なオプションとしてURLのすぐ横で地図の表示の大きさを選ぶことができます。(初期は「中」。)

それぞれのサイズは大800x600、中600X450、小400x300に加え、カスタムサイズもありますので自分のお好みのサイズで出力することもできます。

また、出力後も縦横幅とボーダーの指定はできますので、やっぱりちょっと小さいな…というときや、枠線を入れたい…というときもwidthやframeborderなどで後から指定をすることができます。

設置法② APIキーを使ってカスタマイズ!

次は少し複雑になりますが、様々な設定ができ、自由度も高い設置法です。

よくお店のホームページなどで見かける、お店のロゴが入ったマーカーの設置やたくさんのマーカーを設置したマップなどはこちらの設置法になります。

 

まず必要なものとして、googleのアカウントが必須です。

アカウントを用意したら、APIキーというものを取りに行きます。まずは下のURLをクリック。

https://developers.google.com/maps/documentation/javascript/

 

開いたら右上に「キーを取得」というボタンがあります。それをクリックするとこのような表示が出てきます。

 

 

これはプロジェクト名の入力欄ですのでファイルの名前と同じように、自分がわかりやすく覚えやすい名前を付けます。

するとしばらく読み込み画面が表示された後に「You’re all set!」の文と共にAPIキーが表示されます。

(この背景が薄ピンクのところがAPIキーです。)

右下の「done」をクリックしてとりあえずの取得は完了です。

 

次に「Google API Console」へ移動します。

https://console.developers.google.com/?hl=ja

 

こちらから飛ぶか、検索で「Google API Console」と検索してください。

すると

このような画面が表示され、選択か作成かを聞かれますので「選択」をクリックし、新しく開いたウィンドウの一覧から先ほど名付けたプロジェクトを見つけます。

プロジェクトを選択するとダッシュボードが開くので、真ん中にある「APIの概要に移動」をクリックします。


その後、左にあるカギのマークをクリックし、キーが使える範囲の設定をします。

このように先ほど作ったキーがAPI keyという名前であることを確認し、クリックします。

開いたウィンドウの下側、APIキーの下に「名前」という項目があります。

これは好きに変える事ができますので、覚えやすいものを付けても構いません。

重要なのはその下です。

 

「キーの制限」という項目と、いくつかのボタンが並んでいます。

この項目から自分が使う用途に合ったものを選びます。

(ここではウェブサイトに地図を表示することが目的なので「HTTPリファラー」を選択します。)
するとすぐ下に新しい項目が出てきます。

このウィンドウに自分のホームページのアドレスの共通部分(ページ遷移しても必ず残る部分)を上手に入れます。

(弊社ならhttps://www.axis-corp.com/←この部分は必ず残るので、「www.axis-corp.com/*」と入れます。)

ここまで来たらもう完了!

 

あとはすぐ下の「保存」をクリックし、「ダッシュボード」に移動して「APIとサービスの有効化」をクリックすれば終わりです!!

この設定がなかなか手間ですが、ここまでやってしまえばあとは実際に表示するだけです!

 

次回、google map 設置&応用編に続きます。

ホームページ制作・LP制作

集客やサイト改善などWebに関することなら、
何でもお気軽にお問い合わせください

ウェブ集客のご相談、見積り依頼などは、こちらからお問い合わせください

ご相談・お問い合わせ

サービスや実績などをまとめた会社案内は、こちらからダウンロードできます

会社資料ダウンロード

お急ぎの方はお電話でも相談いただけます

0120-439-241