プラグインを使わずにGoogle Map APIの組込み

プラグインを使わずにGoogle Maps APIをWordpressに組み込む方法を示します。

1. Google Maps APIが提供している次のjsを<heda>~</head>の間に入れる。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

2.次のソースコードをページに入れる。

<script type="text/javascript">
window.addEventListener("load",function(){
  var latlng = new google.maps.LatLng(35.409172,139.59674); 
  var opts = {
        zoom: 16, 
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), opts);

  var m_position1 = new google.maps.LatLng(35.409172,139.59674); 
  var marker1 = new google.maps.Marker({
    position: m_position1,
    title:'最寄駅',
    map: map
  });
},false);
</script>
</head>
<body>
<p>Google Maps v3 APIを使ったサンプル地図。</p>
<div id="map_canvas" style="width:600px; height:360px"><div>
</body>

上記のnew google.maps.LatLng(35.409172,139.59674)の数値は座標(緯度、経度)です。この座標はGoogle Mapを使って地図上から得ることができます。

Google Maps v3 APIを使ったサンプル地図。