投稿日:2017/03/08
更新日:2017/03/23
【前提】
GoogleMapのマーカーを変える、色を変更するには
GoogleMapAPIを使ってjsにてマップ作成する必要があるため
お客様から”GoogleMap用のAPIキー”というものを取得していただく必要がある。
【さっくりしたやり方】
以下をテンプレとして使う。
◇body閉じタグ直前に以下タグを追加
※【APIキー】は差し替えること
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap">
</script>
◇main.jsファイル最下部に以下を追記
※アイコンサイズのレスポンシブに対応。
サイズ毎の画像は別途用意する。PCと同じであれば、PCと同じ画像名を指定する。
緯度・経度は案件毎に変更すること ※色変更等はstylesの項のコメントアウトを外し適宜変更すること
// Gmap
(function() {
var map;
var marker;
var documentWidth = $(document).width();
var viewMode = (documentWidth >= 768) ? 'pc' : 'sp';
var options = {
image: './assets/img/map_icon.png', // pcサイズ用アイコン
image_sp: './assets/img/map_icon_sp.png', // spサイズ用アイコン
lat: xx.xxxxxx, // 緯度
lng: xx.xxxxxx, // 経度
zoom: 18 // ズーム
};
// Resize Event
var resizetimer = false;
window.addEventListener('resize', function() {
if (resizetimer !== false) {
clearTimeout(resizetimer);
}
resizetimer = setTimeout(function() {
documentWidth = $(document).width();
if (documentWidth < 768) {
if (viewMode == 'pc') {
// PC -> SP
viewMode = 'sp';
marker.setIcon(options.image_sp);
}
} else {
if (viewMode == 'sp') {
// SP -> PC
viewMode = 'pc';
marker.setIcon(options.image);
}
}
}, 200);
});
window.initMap = function() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: options.lat,
lng: options.lng
},
zoom: options.zoom,
// 以下はマップスタイルの変更等あれば追記する
// styles: [{
// featureType: 'all',
// stylers: [{
// saturation: -100
// }]
// }]
});
marker = new google.maps.Marker({
position: {
lat: options.lat,
lng: options.lng
},
map: map,
icon: (viewMode == 'pc') ? options.image : options.image_sp
});
}
})();