(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定※個別API取得方法も

コーポレートサイトや飲食店のサイトなどの定番コンテンツ「Access」にGoogleMAPを埋め込むのはよくあることですが、通常のGoogleMAPからiframeで地図を埋め込むこともできますが、横幅と縦幅ぐらいのカスタマイズしかできないので、応用が効きません。そんな訳で今回はGoogleMaps APIを取得して、GoogleMapをカスタマイズする方法を備忘録としてまとめておきます。

GoogleAPIを取得してGoogleMAPを表示

gooleMap_customize01

まず、ごくごくシンプルに地図のみを表示するやり方

（1）head部分に以下のスクリプトを記述

`1`	`<script src="http://maps.google.com/maps/api/js?sensor=true"></script>`

（2）bodyタグにスクリプトを読み込ませるための「onload=”initialize();」を記述。

divのID名は好きな名前に

1<body onload="initialize();">
2 
3<div id="campus_map"></div>
4 
5</body>

（3）CSSで縦横サイズを指定

widthを100％にすれば、横幅可変のスマホ対応です。

1#campus_map{
2     width: 100%;
3     height:300px;
4}

（4）位置情報などの情報をhead内に記述

2行目の「34.705629, 135.510118」が緯度経度。
出し方はGoogleMapで表示させたいポイントで右クリック→「この場所について」で出てくる数値を記述します。

1<script>
2  function initialize() {
3  var latlng = new google.maps.LatLng(34.705629, 135.510118);
4  var myOptions = {
5    zoom: 18, /*拡大比率*/
6    center: latlng, 
7    mapTypeId: google.maps.MapTypeId.ROADMAP
8  };
9  var map = new google.maps.Map(document.getElementById('campus_map'), myOptions);
10}
11</script>

これでマーカーなどの表示なしのシンプルなGoogleMapを表示できます。

DEMO

吹き出しを表示して詳細情報を表示

gooleMap_customize02

GoogleMapに登録されていない場所で、名称は住所を表示させたい場合は以下の様な感じで記述を追加します。

（1）まず、マーカーを表示させるコードをさっきのコードに追記

1var marker = new google.maps.Marker({
2               position: latlng,   //マーカーの位置
3               map: map,   //表示する地図
4               title: 'とある場所'   //ロールオーバー テキスト
5                });

（2）次にマーカー上部に吹き出しを表示させるコードを追加

1var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
2                 '<p class="map_comment">位置に特に意味はありません</p>';
3var infowindow = new google.maps.InfoWindow({
4    content: contentString  //吹き出し内コメント
5 });
6 
7 //吹き出しをオープン
8 infowindow.open(map,marker);

「+」で区切ることによって、吹き出しの中身の内容を追加できます。「名称」「住所」「電話番号」とか別々に設定できます。それぞれCSSで設定することもできます。

1h3.map_title{
2  text-align: center;
3  font-size: 16px;
4}
5p.map_comment{
6  padding:0 30px;
7}

（3）一度閉じた吹き出しを再表示

「×」で消した吹き出しをマーカーをクリックすると再表示させるためのコードは以下

1google.maps.event.addListener(marker, 'click', function() {
2    infowindow.open(map,marker);
3});

（4）今までのコードをまとめるとこんな感じ

1  function initialize() {
2  var latlng = new google.maps.LatLng(34.705629, 135.510118);
3  var myOptions = {
4    zoom: 18, /*拡大比率*/
5    center: latlng, /*表示枠内の中心点*/
6    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
7  };
8  var map = new google.maps.Map(document.getElementById('map_space'), myOptions);
9 
10 
11  //マーカーを作成
12  var marker = new google.maps.Marker({
13    position: latlng,   //マーカーの位置
14    map: map,   //表示する地図
15    title: 'とある場所'   //ロールオーバー テキスト
16   });
17   //吹き出しを作成
18   var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
19                    '<p class="map_comment">位置に特に意味はありません</p>';
20   var infowindow = new google.maps.InfoWindow({
21       content: contentString  //吹き出し内コメント
22    });
23 
24 
25    //吹き出しをオープン
26    infowindow.open(map,marker);
27 
28 
29    //マーカーをクリックすれば吹き出しが再表示
30    google.maps.event.addListener(marker, 'click', function() {
31        infowindow.open(map,marker);
32    });
33                
34}

これで、とりあえず簡易的なMAPですが、「好きな位置」に「好きな吹き出し内容」が表示できるようになりました。

DEMO

マーカーをオリジナルデザインにする。

gooleMap_customize03

今度は位置を表示するピン（マーカー）をオリジナルのデザインにしてみます。ロゴマークのある飲食店とかのWEBサイト作成とかに使えばオリジナル感が出るかと思います。

マーカーを画像にするコードは以下

1var icon = new google.maps.MarkerImage('map_icon.png',
2  new google.maps.Size(156,198),/*アイコンサイズ設定*/
3  new google.maps.Point(0,0),  // origin
4  new google.maps.Point(60,100) // anchor
5  );
6var markerOptions = {
7  position: latlng,
8  map: map,
9  icon: icon,
10  title: 'とある場所'
11};

画像アイコンがずれて表示してしまう場合は「anchor」で位置を調節します。

で、最終的に出来上がったアイコンがオリジナルのGoogleMapは以下

DEMO

アイコンが吹き出しっぽいので、詳細情報の方の吹き出しは最初は非表示にして、アイコンをクリックすれば表示されるようにしてます。

最終的に、位置情報を取得して、吹き出しを表示させて、マーカーをアイコンにする場合のコードのまとめ

1  function initialize() {
2 
3  var latlng = new google.maps.LatLng(34.705629, 135.510118);
4  var myOptions = {
5    zoom: 18, /*拡大比率*/
6    center: latlng, /*表示枠内の中心点*/
7    mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
8  };
9  var map = new google.maps.Map(document.getElementById('map_space'), myOptions);
10 
11  //アイコンを作成
12   var icon = new google.maps.MarkerImage('map_icon.png',
13    new google.maps.Size(156,198),/*アイコンサイズ設定*/
14    new google.maps.Point(0,0),  // origin
15    new google.maps.Point(60,100) // anchor
16    );
17  var markerOptions = {
18    position: latlng,
19    map: map,
20    icon: icon,
21    title: 'とある場所'
22  };
23  var marker = new google.maps.Marker(markerOptions);
24  //アイコン設定はここまで
25     var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
26                    '<p class="map_comment">位置に特に意味はありません</p>';
27   var infowindow = new google.maps.InfoWindow({
28       content: contentString  //吹き出し内コメント
29    });
30 
31    //吹き出しをオープン
32 
33    //マーカーをクリックすれば吹き出しが再表示
34    google.maps.event.addListener(marker, 'click', function() {
35        infowindow.open(map,marker);
36    });
37              
38}

今回参考にさせていただいたサイト

まとめ

とりあえず、初歩的なGoogleMapの表示で多少のオリジナリティを出そうという事でこんな感じになりました。
ここから地図の色を変えたり、さらにカスタマイズはできますが、今回はこのぐらいで。

スマホサイトの普及で、地図はGoogleMapが一番いいのかなと思ってましたが・・・
先日の案件では「年配は使いづらいからやっぱり画像の方がいい」という意見も出ました。
クライアントさんがGoogleMapに使い慣れてないからそういう意見が出たっていうのもあるかと思いますが、必ずしも「MAP=GoogleMap」ではないんだと再認識しました。結局、画像形式のPDFDownload形式とGoogleMapの表示を切り替える折衷案になったんですけどね。今回は以上ですm(_ _)m

Googleの仕様変更の件※2017年2月21日追記

このエントリーですが、以前はてブのホットエントリーに一瞬だけ載ったみたいで、それなりにアクセス数があるようなんで、追記しておきますけど、上記の記述だけでは新規サイトはGoogleMAPが表示させれません。

去年（2016年）の情報なので今更かもしれませんが、2016年6月22日からGoogleの仕様変更でGoogleMAPを使用するには「個別のAPIキー」が必須になりました。
すでに設定済みのサイトは問題なく表示されますが、新たに作成するサイト、もしくは元あるサイトに新しくGoogleMAPを設置する場合には下記設定が必要です。

google-map_tuiki00

※上記だけの設定だと、こんな画面で表示されないはずです。

GoogleMAPの個別APIの取得方法

まずは、「Google Maps APIs for Web」にアクセスして、右上の「キー取得」のボタンを押します。
※Googleアカウントのログインが必要になります。

google-map_tuiki01

ポップアップで「Google Maps ウェブ API をアクティベートする」と出てくるので「続ける」を押す。

google-map_tuiki02

「プロジェクトを作成」が選択されてる状態で「続行」を押す。

google-map_tuiki03

「名前」はテキトーに何でもいいので記述し、「HTTPリファラー（WEBサイト）」を選択し、概要URLを記述もしくはコピペ。

google-map_tuiki04

必要項目を記述すると、APIキーが表示されるのでコピペ

google-map_tuiki05

あとは、当記事で紹介したコードを以下のように書き換える。

変更前

`1`	`<script src="http://maps.google.com/maps/api/js?sensor=true"></script>`

変更後

`1`	`<script src="https://maps.googleapis.com/maps/api/js?key=ここに取得したAPIキー"></script>`

変更前

1<body onload="initialize();">
2 
3<div id="campus_map"></div> 
4 
5</body>

変更後

1<body>
2 
3<div id="campus_map"></div> 
4 
5</body>

特に上の＜body＞タグの「onload」の記述を抜いておくようにしましょう。

原因はよくわからないんですが、このコードを抜いておかないと、僕が使ってるエディタ（coda2）がクラッシュしてまったく編集ができなくなりました。
ちなみに、APIの取得が認識されるのに数分（5分ぐらい？）かかる場合があるみたいなので、すぐ変わらなくてもあせらず待ってみましょう。

ころころ仕様が変更されるのは、Googleではよくあることですが、これまでのMAPは問題なく表示させておいてくれてて幸いでした。今後はこの設定で表示させるようにします。
今回の追記は以上です。

今回参考にさせていただいたサイト

Google Maps の APIキーを簡単に取得する | ねんでぶろぐ

(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定※個別API取得方法も

GoogleAPIを取得してGoogleMAPを表示

（1）head部分に以下のスクリプトを記述

（2）bodyタグにスクリプトを読み込ませるための「onload=”initialize();」を記述。

（3）CSSで縦横サイズを指定

（4）位置情報などの情報をhead内に記述

吹き出しを表示して詳細情報を表示

（1）まず、マーカーを表示させるコードをさっきのコードに追記

（2）次にマーカー上部に吹き出しを表示させるコードを追加

（3）一度閉じた吹き出しを再表示

（4）今までのコードをまとめるとこんな感じ

マーカーをオリジナルデザインにする。

今回参考にさせていただいたサイト

まとめ

Googleの仕様変更の件※2017年2月21日追記

GoogleMAPの個別APIの取得方法

今回参考にさせていただいたサイト

Share

こちらの記事もあわせてどうぞ

GoogleMapをAPIを使わずiframeでグレーに変更する

(K)Googleフォームを使用した時にフォームの送信先を指定のアドレスに設定する方法

(K)WordPressで構築したサイトURLの「/wp」を変更する場合

(K) bxSliderでスマホ対応のコンパクトなスライダーを作成

(K) bxSlider で複数枚のバナーを同時表示してスライドさせるコンテンツスライダーを作成

(K)WordPressでコーポレートサイトを初めて作った時に参考にさせてもらったサイト様【参考】

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル