Google Mapsを最強にカスタマイズ
案件でGoogle Mapをよく使うんですが、カスタムされたデザインのMapのコーディングは
少し時間がかかり、いつも理想通りの地図が作れず90%くらいで妥協してしまうことが多いです。この記事であらゆるカスタム方法をまとめ、Google Mapsのコーディングを好きになりたいと思います。
最後にすごく使いやすくカスタムしたスクリプトを紹介します。
この記事で紹介している方法はほんの数行のスクリプトにまとめましたので是非使ってみてください。
Google Maps API
2016年6月22日から新規サイトのマップ表示にAPIキーが必須となりました。
https://console.developers.google.com
Geocoding
住所から緯度、経度を調べたい時に使います。
http://www.geocoding.jp/
初級編
デフォルの表示をする
まずは表示してみましょう。
<div class="map-wrap"> <div id="map-kumejima" class="map"></div> </div>
.map-wrap {
max-width: 100%;
width: 100%;
padding-top: 50%; /* 幅:高さ = 2:1 の地図 */
height: 0 ;
margin: 0 ;
position: relative;
}
.map {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
var canvas = document.getElementById('map-kumejima');
var latlng = new google.maps.LatLng( 26.350425 , 126.771183 );
var mapOptions = {
zoom: 18 , // ズーム値
center: latlng , // 中心座標 [latlng]
};
var map = new google.maps.Map( canvas , mapOptions );
表示されない場合は、以下の3点を確認してみて下さい。
- APIキーを読み込んでいるか。
- APIを有効にしたか。
- IDが間違っていないか。
スクロールをさせない
スマホでスクロールさせないようにします。
Mapクラスのオプションのdraggable:falseを追加しました。
var mapOptions = {
draggable: false,
}
アイコンを画像にする
デフォルトのピンからオリジナルの画像に変更します。
そして、そのアイコンにアニメーションを付けます。
MarkerクラスのメソッドsetOptions()を使うことで、すでに追加しているマーカに対して、
iconで画像を、animationで動きを付けました。スライム可愛いですね〜。
marker.setOptions({
icon: {
url: markerOptions[i]['icon'],
scaledSize: new google.maps.Size( 30 , 30 ),
}
});
// markerアニメーション
marker.setOptions({
animation: markerOptions[i]['anima'],
});
テキストを表示する
InfoWindowで、自由なテキストを表示します。
contentに要素、テキストを入れ、positionで位置を指定し、pixelOffsetで40pxだけずらしました。
infoWindow[i] = new google.maps.InfoWindow({
content: '
' + '貴船神社の近くにある流しそうめんがおいしい「ひろ文」だよ。' + '
', // 吹き出しに表示する内容
position: new google.maps.LatLng(35.125374, 135.763876),
pixelOffset: new google.maps.Size(0, -40),
});
infoWindow[i].open(googlemap);
今回このページで使ったjsファイルです。APIを読み込んだ上で自由にご使用ください。
1927.js
次はカスタムに少し手間がかかりますが、マップにオリジリティを出すための、色のカスタム、道の表示などをまとめます。
コメント