[JS]Google Maps APIの地図をレスポンシブ対応する方法

CSS

2014.12.042024.08.21

Google Maps APIの地図をレスポンシブWEBデザイン対応にする方法のご紹介です。

PCでブラウザを伸縮しても、スマートフォン端末を縦横に回転しても、Google Maps のピンを常に中央に表示させることができます。

Javascript
HTML
CSS

Javascript

<head>タグ内か</body>タグの直前に以下のようなコードを追加して、Google Maps APIを読み込みます。

<script src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script>
<script>
function initialize() {
  var latlng = new google.maps.LatLng(緯度経度の位置情報),
  opts = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
var map = new google.maps.Map(document.getElementById('gmap'), opts);
var contentString = 'ピンクリック時の表示名称';
var infowindow = new google.maps.InfoWindow({
  content: contentString,
});

var marker = new google.maps.Marker({
  position: latlng,
  map: map
});

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

google.maps.event.addDomListener(window, "resize", function() {
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

function initialize() {

var latlng = new google.maps.LatLng(緯度経度の位置情報),

opts = {

zoom: 16,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById('gmap'), opts);

var contentString = 'ピンクリック時の表示名称';

var infowindow = new google.maps.InfoWindow({

content: contentString,

});

var marker = new google.maps.Marker({

position: latlng,

map: map

});

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);

});

google.maps.event.addDomListener(window, "resize", function() {

var center = map.getCenter();

google.maps.event.trigger(map, "resize");

map.setCenter(center);

});

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

※1行目の「APIキー」はご利用のキーを指定してください。
※2行目以降の<script></script>の記述は外部ファイル化しても問題ありません。
※4行目の「緯度経度の位置情報」は、地図を表示させたい場所の緯度経度情報に置換してください。
※11行目の「ピンクリック時の表示名称」は、地図上のピンをクリックした際に表示される文字列に置換してください。

HTML

HTMLファイル側は、地図を表示するための要素（#gmap）を親要素（#gmap_wrapper）で囲みます。

<div id="gmap_wrapper">
	<div id="gmap"></div>
</div>

</div>

CSS

#gmap_wrapper要素のpadding-topで地図の大きさを調整します。以下の例では50%にしていますが、%の値を大きくすると地図の表示サイズが大きくなります。

また、#gmap要素のスタイルはposition: absoluteにし、width、heightともに値を100%にします。

#gmap_wrapper {
  width:100%;
  padding-top:50%;
  position: relative;
  margin:auto;
}

#gmap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}