Google Maps API

ウィンドウ幅を変えても必ずピンが画面の中央に配置されるレスポンシブ対応の Google Maps の設置方法を紹介します。

以下のリンク先にサンプルを用意しています。
試しにウィンドウ幅を変えてみてください。

Responsive Google Maps : https://on-ze.com/demo/api-google-maps-responsive/

実はコレ、以外と簡単に実装できてしまいます。

HTML の記述

まずは Google Maps を表示させる場所を作ります。

<div id="googlemaps"></div>

ここでは単純に div 要素に id="googlemaps" と名付けています。

CSS の記述

続いてスタイルシートの記述は以下のとおり。

#googlemaps {
width:100%;
height:300px;
position:relative;
}

こちらも非常にシンプルです。
要素の幅と高さは任意で変更してください。

JavaScript の記述

最後に JavaScript の書き方ですが、その前に、忘れずに Google Maps API を読み込んでおきましょう。

<script src="//maps.google.com/maps/api/js?key=XXXXX"></script>

ちなみに2016年6月22日より Google Maps のAPIキー登録が必須になっているので注意してください。

上記コード内 ?key=XXXXX の箇所で有効なAPIキーを入力していないとエラーになって地図が表示されません。

Google Maps API を読み込んだら、最後にマップの初期化を行います。

function initialize() {
	var latlng = new google.maps.LatLng(35.681298, 139.7662469);
	var myOptions = {
		zoom: 18,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.LOADMAP,
		scrollwheel: false,
		disableDefaultUI: false,
	};
var map = new google.maps.Map(document.getElementById('googlemaps'), myOptions);
var lopanMarker = new google.maps.Marker({
	position: latlng,
	map: map,
});
google.maps.event.addDomListener(window, "resize", function() {
	var center = map.getCenter();
	google.maps.event.trigger(map, "resize");
	map.setCenter(center);
});
var styledMapOptions = { name: '東京駅' }
}
google.maps.event.addDomListener(window, 'load', initialize);

キモになるのは15〜19行目。
次のコードの部分です。

google.maps.event.addDomListener(window, "resize", function() {
	var center = map.getCenter();
	google.maps.event.trigger(map, "resize");
	map.setCenter(center);
});

このコードでリサイズしたときセンタリングする処理を実装しています。

なおHTMLで作ったマップを表示させる要素は getElementById('googlemaps') で。
地図の中心となる、ピンの位置は LatLng(35.681298, 139.7662469) で、それぞれ指定しています。

初心者の方は上記、すべてのコードのコピペしてお試しください。

サンプルは以下より。

Responsive Google Maps : https://on-ze.com/demo/api-google-maps-responsive/