english

ブログ

2018.03.23

google map 簡単設置&設定編
google map 簡単設置&設定編

ホームページ制作関連

 

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

 

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

設置法① リンク&iframeで簡単設置!
まずは一番簡単でお手軽な方法の紹介です。
google mapへアクセスし、自分のホームページに埋め込みたい場所を検索し、マップ上に表示させておきます。

 


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

あとはhrefでリンクを貼れるのですが、これではリンクをクリックすると別タブで大きな地図が開いてしまううえに地図のリンクかどうかがわからなくなってしまいます。
やっぱり自分のホームページの中に地図が見えるように入れたい!という方はiframeを使ってみましょう。

 

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

するとすぐ下に地図が表示されました。
この状態がそのまま表示されますので、あとはURLをコピーして自分のホームページ上の表示させたい場所に張り付けるだけです。
ちなみに、簡単なオプションとしてURLのすぐ横で地図の表示の大きさを選ぶことができます。(初期は「中」。)
それぞれのサイズは大800x600、中600X450、小400x300に加え、カスタムサイズもありますので自分のお好みのサイズで出力することもできます。
また、出力後も縦横幅とボーダーの指定はできますので、やっぱりちょっと小さいな…というときや、枠線を入れたい…というときもwidthやframeborderなどで後から指定をすることができます。

 

***

 

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

次は少し複雑になりますが、様々な設定ができ、自由度も高い設置法です。
よくお店のホームページなどで見かける、お店のロゴが入ったマーカーの設置やたくさんのマーカーを設置したマップなどはこちらの設置法になります。

まず必要なものとして、googleのアカウントが必須です。
アカウントを用意したら、APIキーというものを取りに行きます。
まずはこちらをクリック。
→ 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とサービスの有効化」をクリックすれば終わりです!!
この設定がなかなか手間ですが、ここまでやってしまえばあとは実際に表示するだけです!

次回、「マップの表示」に続きます。

WEBコンサルティング

最適化・最大化させる。

制作、集客、解析、改善、検証まで一気通貫した完全オーダーメイドのWebコンサルティング。
お客様のビジネスゴールに向けた戦略的コンサルティングを行います。

VIEW MORE くわしく見る

ホームページ制作

キレイなだけじゃない。

競合分析・サイト設計から更新・運用までトータルサポート。
Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。

VIEW MORE くわしく見る

ネット集客・広告

来てほしい人が来てくれる。

御社にとっての最適解は、本当にリスティング広告で集客することですか?
リスティング運用者全員がWebコンサルタントのアクシスでは、そこから話を始めます。

VIEW MORE くわしく見る

解析・分析・改善

あなたのサイトを丸裸に。

Webサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。
“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。

VIEW MORE くわしく見る

お問い合わせ

メールフォームからの
お問い合わせ