Google Maps APIについての備忘録

2015年12月01日 火曜日 00時24分

ぱくたそで拾った写真

兼務してるwebのお仕事でGoogle Mapsを使用する案件があったので備忘録。
以前書いたwordpressのプラグイン「MapPress PRO」では対応出来ない条件なんかがあったので、APIを使用する事になったんです。

言うまでもなく俺はJavaScriptはド素人なんで、ググりまくって出て来たソースを組み合わせたりして何とか形にしたソースなので、シッカリとした本物さんから見るとへそで茶を沸かす記述かと思いますが知ったこっちゃないです（笑）。

ちなみに上の写真に意味は全くありません。
ぱくたそってフリー写真素材サイトで見つけた男子校出身の俺の心をキャッチした写真を使ってみたかっただけです。

[ad#ad-big]

複数のオリジナルマーカーを表示させ、各マーカーにリンクを貼る

見出し通りですが、マップ上に複数のオリジナルマーカーを配置し、そのマーカーにリンクを貼ってクリックすると指定のURLにジャンプする様にします。
複数じゃなくても良い場合は、繰り返し記述してる部分を1つだけ残せはOKです。

【 DEMO 】

【 ソース 】 

<script type="text/javascript">
function map_canvas() {
//マーカーの位置情報
  var data = new Array();
    data.push({ //東京スカイツリー
      lat: '35.710432',
      lng: '139.809372',
      url: 'http://www.tokyo-skytree.jp/'
    });
    data.push({ //東京タワー
      lat: '35.658570',
      lng: '139.745484',
      url: 'http://www.tokyotower.co.jp/index.html'
  });
    data.push({ //東京ディズニーリゾート
      lat: '35.635960',
      lng: '139.880700',
      url: 'http://www.tokyodisneyresort.jp/top.html'
  });
 
//初期位置
  var latlng = new google.maps.LatLng('35.675686','139.820887');
  var opts = {
    zoom: 11,//地図の縮尺
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
//地図を表示させるエリアのidを指定（今回は<div id="gmap">）
  var map = new google.maps.Map(document.getElementById("gmap"), opts);
 
//マーカーを配置
    var markers0 = new google.maps.Marker({
      position: new google.maps.LatLng(data[0].lat, data[0].lng),
      map: map,
      icon:'/wordpress/wp-content/uploads/2015/11/skytree.png'
    });
    var markers1 = new google.maps.Marker({
      position: new google.maps.LatLng(data[1].lat, data[1].lng),
      map: map,
      icon:'/wordpress/wp-content/uploads/2015/11/tower.png'
    });
    var markers2 = new google.maps.Marker({
      position: new google.maps.LatLng(data[2].lat, data[2].lng),
      map: map,
      icon:'/wordpress/wp-content/uploads/2015/11/disney.png'
    });

//クリックしたら指定したurlに遷移するイベント
    google.maps.event.addListener(markers0, 'click', (function(url){
      return function(){ location.href = url; };
    })(data[0].url));
    google.maps.event.addListener(markers1, 'click', (function(url){
      return function(){ location.href = url; };
    })(data[1].url));
    google.maps.event.addListener(markers2, 'click', (function(url){
      return function(){ location.href = url; };
    })(data[2].url));
}

//地図描画を実行
google.maps.event.addDomListener(window, 'load', map_canvas);
</script>

<!-- マップ表示用 -->
<div id="gmap"></div>

簡単に説明すると、4行目から9行目が位置情報の記述。
緯度経度とリンク先URL。
これを複数書けば良い。

21行目から27行目は初期位置の設定。

30行目はgoogle mapを表示させるdivのidを指定。

33行目から37行目はオリジナルマーカーの設定。
markers0〜markers2と言うのは入物で、そこにマーカーを表示させるポジションとアイコンのURLを指定します。
ポジションの所に(data[0].lat, data[0].lng)とありますが、これは最初に指定したマーカー位置情報の1つ目（東京スカイツリー）と言うこと。
0から始まるのです。

50行目から52行目は、markers0〜4をクリックすればマーカー位置情報のURLで指定した所に飛びますよって指定です。

んで、66行目の空divは、30行目で指定したidを付ける事によってマップが表示されます。

説明が分かりづらいと思うけど、基本的に個人的備忘録なのでほっとけ。

複数のオリジナルマーカーを表示させ、マーカークリックで情報ウィンドウを1つだけ表示させる

オリジナルマーカーをクリックすると情報ウィンドウが表示され、そこに住所や電話番号などの情報を掲載させます。
情報ウィンドウの中にリンクを貼って、それぞれのページにリンクを張ることも可能です。
さらに、マップ上に表示される情報ウィンドウは常に1つだけで、複数の情報ウィンドウが開きっぱなしにならない様にしました。

【 DEMO 】

【 ソース 】 

<script type="text/javascript">
var currentInfoWindow = null;
function initialize() {
  var center = new google.maps.LatLng('35.675686','139.820887');
  var sky = new google.maps.LatLng(35.710432,139.809372);
  var tower = new google.maps.LatLng(35.658570,139.745484);
  var disney = new google.maps.LatLng(35.635960,139.880700);

  var myOptions = {
    zoom:11,
    center:center,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('gmap_b'), myOptions);

//東京スカイツリーの設定
  var skycontent = '<p class="gm_p">' +
      '<span class="gm_s">東京スカイツリー</span><br />' +
      '〒131-0045<br />' +
      '東京都墨田区押上1丁目1-2<br />' +
      '0570-550-634<br />' +
      '<a href="http://www.tokyo-skytree.jp/" target="_blank">詳細を見る >></a>'
      '</p>';
  var skywindow = new google.maps.InfoWindow({
    content:skycontent
  });   
  var skyimage = '/wordpress/wp-content/uploads/2015/11/skytree.png';
  var skyMarker = new google.maps.Marker({
    position:sky,
    map:map,
    icon:skyimage
  });  
  google.maps.event.addListener(skyMarker, 'click', function() {
    if (currentInfoWindow) {
      currentInfoWindow.close();
    }
  skywindow.open(map, skyMarker);
  currentInfoWindow = skywindow;
  });

//東京タワーの設定
  var towercontent = '<p class="gm_p">' +
      '<span class="gm_s">東京タワー</span><br />' +
      '〒105-0011<br />' +
      '東京都港区芝公園4丁目2-8<br />' +
      '03-3433-5111<br />' +
      '<a href="http://www.tokyotower.co.jp/index.html" target="_blank">詳細を見る >></a>'
      '</p>';
  var towerwindow = new google.maps.InfoWindow({
    content:towercontent
  });    
  var towerimage = '/wordpress/wp-content/uploads/2015/11/tower.png';
  var towerMarker = new google.maps.Marker({
    position:tower,
    map:map,
    icon:towerimage
  });  
  google.maps.event.addListener(towerMarker, 'click', function() {
    if (currentInfoWindow) {
      currentInfoWindow.close();
    }
  towerwindow.open(map, towerMarker);
  currentInfoWindow = towerwindow;
  });

//東京ディズニーランドの設定
  var disneycontent = '<p class="gm_p">' +
      '<span class="gm_s">東京ディズニーランド</span><br />' +
      '〒279-0031<br />' +
      '千葉県浦安市舞浜1-1<br />' +
      '045-330-5211<br />' +
      '<a href="http://www.tokyodisneyresort.jp/top.html" target="_blank">詳細を見る >></a>'
      '</p>';
  var disneywindow = new google.maps.InfoWindow({
    content:disneycontent
  });   
  var disneyimage = '/wordpress/wp-content/uploads/2015/11/disney.png';
  var disneyMarker = new google.maps.Marker({
    position:disney,
    map:map,
    icon:disneyimage
  });  
  google.maps.event.addListener(disneyMarker, 'click', function() {
    if (currentInfoWindow) {
      currentInfoWindow.close();
    }
  disneywindow.open(map, disneyMarker);
  currentInfoWindow = disneywindow;
  });

}
 
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<!-- マップ表示用 -->
<div id="gmap_b"></div>

2行目のvar currentInfoWindow = null;と35行目から37行目のif (currentInfoWindow) { currentInfoWindow.close(); }と39行目のcurrentInfoWindow = skywindow;で、情報ウィンドウが1つだけ表示されるようにしています。
これは1つだけ書くんじゃなくて、各マーカーのgoogle.maps.event.addListener部分全てに書きます。

後は適当に変える所変えればなんとかなるでしょ。
俺も基本素人だからよく分からん（笑）。
上手く表示されてるなら良いんです。

付け焼き刃じゃ駄目なのは分かっちゃいるが…

と言う訳で、必要に迫られてAPIに手を出したのは良いけれど、やっぱり難しいね。
いろいろ調べてそれっぽいソースは見つかるけれど、完全にやりたい事と一致した物が見つからないからもー大変。

JavaScriptは色々な書き方があるから、「コレとコレを融合させれば良い感じになるんじゃね？」ってのは良くあるけど、それを上手いこと1つに出来ないんだわ。
まぁ、所詮は素人だからしょうがない。

じっくり勉強してる暇もないから上手いこと誤魔化してやって行こうか（笑）。

COMMENTS：コメ無し(つд・)エーン
CATEGORY：WORDPRESSTAGS：

関連記事

コメントさんきゅ

コメントはまだありません...(つд・)エーン

コメントどーぞ

© 2010 - 2024 南国スキーぶろぐ