Google Maps API の地図のレスポンシブWEB対応｜CSS｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

Google Maps API の地図のレスポンシブWEB対応

スポンサード

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

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

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>

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

HTML

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

<div id="gmap_wrapper">
	<div id="gmap"></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;
  }

Google Maps のレスポンシブ対応のデモ

スポンサード