GoogleMapApiを利用して好みのMapを表示させるためのシンプルなコード

GoogleMapApiを利用することによってカスタマイズしたマップを表示できます。吹き出しの幅を指定したりピンの色を変更できたりするんですが今回はやたらシンプルなコードと最速手順を紹介します。

HTML

<div id="map_canvas" class="map_canvas"></div>
<!-- Javascript --> 
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <!-- これはローカルじゃなくても大丈夫です--> 
<!--googleMapApis-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
<script>
$(function(){
 creatMap("map_canvas","ポップアップ","緯度","経度");
});

function creatMap(mapId,tenpoNmae,xcode,ycode){
 /* 位置 */
 var latlng1 = new google.maps.LatLng(xcode, ycode);
 
 /* 設定 */
 var opts1 = {
   zoom: 15,
   center: latlng1,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 
 /* 地図オブジェクト */
 var map1 = new google.maps.Map(document.getElementById(mapId), opts1);
 
 /* マーカー */
 var m_latlng1 = latlng1;
 var marker1 = new google.maps.Marker({
     position: m_latlng1,
     map: map1
     });
 
 /* 情報ウィンドウ */
 var info_win1 = new google.maps.InfoWindow({content: "<div style='text-align: center!important;'>" + tenpoNmae + "</div>"});
 google.maps.event.addListener(marker1, 'mouseover', function() {info_win1.open(map1,marker1);});
 google.maps.event.addListener(marker1, 'mouseout', function() {info_win1.close();});
}
</script>

creatMap()は別ファイルに記述しても大丈夫です。
引数第1には描画するdivのIDを設定します。
引数第2ポップアップは描画されたマップのマーカーにマウスオーバーすると吹き出し形式で表示されます。
引数第3・3には緯度・経度を。Geocodingなどのサービスで住所から緯度経度を検索できます。

CSS

.map_canvas{
 width: 100%;
 height: 400px;
}

cssでは描画スペースの定義をします。ここもサイトに応じて変更してください。

表示結果

google map

自分の思った位置にマーカーがセッツできます。コードもシンプルなので大がかりではないけどってサイトに導入してはどうでしょうか。

Related articles