GoogleMapをスクロールしないように埋め込む
top-bnr

GoogleMapをスクロールしないように埋め込む

   2017/03/17

Google, Map API

Google Map APIを使う!

GoogleMapをページに埋め込んでいると、マウスホイールでスクロール中にGoogleMapがカーソル下に表示されるとMapの拡大縮小されてしまいスクロールできなくなります。

大きくGoogleMapを表示している場合はかなり邪魔になりますので、GoogleMapのAPIを利用するのがオススメです。

APIの利用には、Googleアカウントを登録し取得できるAPIキーが必要になります。

GoogleMap API登録ページ

 

 

下の例が、apiを利用した表示例になります。

GoogleMapを挿入したい場所にタグを記述

GoogleMapを挿入するタグのidを指定して、apiを記述します。

今回は、下記のdivタグをGoogleMap挿入場所として記述しました。

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

 

GoogleMapを挿入する場所のスタイルを設定する

このままapiを記述しても、高さも幅も0の場所に挿入されますので、ページ上から見ることができません。

最低でも高さと幅のstyleを指定します。

今回は、下記のような指定としました。

#map{
    width: 100%;
    height: 600px;
}

 

挿入したいGoogleMapの座標を取得する

GoogleMapのapiでは、地図の緯度と経度を指定する必要があります。

自由の女神で検索して、マーカーを右クリックしたのが下の画像になります。

赤枠で囲ってる「この場所について」をクリックします。

GoogleMap座標

クリックするとページ下部に情報が表示されます。

GoogleMap緯度経度

こちらの赤い枠で囲ってある数値を、そのままコピーしておきます。

 

apiを記述してみる

コピーしておいた緯度と経度を、そのまま下記コードの指定部分に貼り付けることで目的のGoogleMapのページ挿入ができます。

$(function(){
	initMap();
});

function initMap() {
  var latlng = new google.maps.LatLng(【コピーした緯度経度】);
  var myOptions = {
    zoom: 17,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false 
  };
  var map = new google.maps.Map(document.getElementById('map'), myOptions);

  var m_latlng1 = new google.maps.LatLng(【コピーした緯度経度】);
  var marker1 = new google.maps.Marker({
    position: m_latlng1,
    map: map
  });
}
The following two tabs change content below.
リアルマックス スタッフ
bottom-bnr
  • ブログランキング・にほんブログ村へ
  • FC2ブログランキングへ
  • 人気ブログランキングへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る