WordPressでGooglemap

      2016/02/17

WordPressで自分で経度緯度入力してマップを表示する場合の自分用覚書。

headerにGooglemapapiを読み込ませておく。

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

カスタムフィールドテンプレートで経度、緯度、ズームの入力項目を作る
[longitude]
type = text
size = 35
label = 経度

[latitude]
type = text
size = 35
label = 緯度

[zoom]
label = マップの範囲(1に近いほど広域)
type = radio
value = 1 # 2 # 3 # 4 # 5 # 6 # 7 # 8 # 9 # 10 # 11 # 12 # 13 # 14 # 15 # 16 # 17 # 18 # 19 # 20 # 21
default = 8
clearButton = true

<とかが勝手に変換されちゃうのでscriptタブ使ってます
[script]
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById( 'map' );
var myOptions = {
zoom: ,
center: new google.maps.LatLng( , ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map( mapdiv, myOptions );
var marker = [];
var infowindow = [];
});
[/script]

マップの読み込み
<div id="map"></div>

 - WordPress