Googleマップにピンを表示する(レスポンシブ対応) 2016年6月8日
Tag:


レスポンシブサイトで、画面サイズが変わってもgooglemapのピンを中心に表示する方法です。

1901

1.iframeを使うのではなく、空のdiv要素を用意します。

<div id="map_Worp">
  <div id="map"></div>
</div>

2.CSS

#map_Worp {
  position: relative;
  padding-top: 50%;
}
#map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

3.外部スクリプトをbodyの一番下に記述します。

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>

4.下記のスクリプトも下に追加します。

function initialize() {
  var myLatlng = new google.maps.LatLng(53.3333,-3.08333),
  mapOptions = {
    zoom: 11,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions),
  contentString = 'Some address here..',
  infowindow = new google.maps.InfoWindow({
    content: contentString,
    maxWidth: 500
  });

  var marker = new google.maps.Marker({
    position: myLatlng,
    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);
new google.maps.LatLng(53.3333,-3.08333)の様に数字の部分は表示する地図の緯度と経度です。

5.地図の緯度と経度はgooglemapのurlの部分に表示されます。

1902
zoom: 11,はMAPの拡大・縮小の数字です。

関連記事

New

Aechive

Tag

css Facebook facebookカスタマイズ Facebookページ facebooRSS font functions.php google NEWマーク photoshop RSS SEO single.php webツール WEBデザインツール Wordpress アイコン アーカイブ エディタ カスタムタクソノミー カスタムフィールド カスタムフィールドテンプレート カスタム投稿 カテゴリー カレンダー クリップアート サイドバー ターム テキスト テンプレートタグ パターン ブラシ プラグイン ヘッダ ページ 並び替え 人気 便利 分岐 文法チェック 月別アーカイブ 特定カテゴリー 画像 記事