2015年7月22日

座標投稿でGoogleMapを表示させる





MTでGoogleMapを表示させるには、通常エディタで埋め込みソースをいれますが

カスタムフィールドを使って、指定サイズのマップを表示させる方法です。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
/* 地図の初期化 */
function initialize() {

  /* 緯度・経度:日本, 表参道駅(東京)*/
  var latlng=new google.maps.LatLng( カスタムフィールド名 );

  /* 地図のオプション設定 */
  var myOptions = {
    zoom: 15, /*初期のズーム レベル */
    center: latlng, /* 地図の中心点 */
    mapTypeId: google.maps.MapTypeId.ROADMAP /* 地図タイプ */
  };

/* 地図オブジェクト */
  var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);

/* ★マーカーオブジェクト */
  var marker = new google.maps.Marker({
    position: latlng, /* マーカーを立てる場所の緯度・経度 */
    map: map, /*マーカーを配置する地図オブジェクト */
    title: 'マーカー名'
  });
}

/* ロード時に初期化 */
google.maps.event.addDomListener(window, 'load', initialize);
</script>



<div id="map_canvas"style="width : 600px; height : 400px;"></div>

これで横600ピクセル、縦400ピクセルのGoogleMapが表示されます。
座標指定した位置にマーカーが表示され、そこを中心で指定サイズで表示されます。

0 件のコメント:

コメントを投稿

ドメインって、早い者勝ちですよ!