WordPress

WordPressでGooglemap

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>

  • この記事を書いた人

ゆず

■忘れないように自分の覚書と、誰かも困っているかもしれないので参考になればいいなくらいの軽い備忘録です。
■サイト運営費のためGoogleAdsenseをいれています。
giftee / ko-fi / mail

1

outlookを最小化すると勝手に終了してしまうと相談されたけど実はそれ勝手に閉じてるわけじゃなくて、おそらく「最小化時にアイコン化する設定」になってるんや・・・。 outlookの最小化時の設定を変 ...

2

前提 自分用ブックマークサイトとして使用しているてがろぐに、いいねボタンをつけようという狙いです。なので、てがろぐのセットアップは終了し稼働しているものとします。 配布ページのマニュアルを参考に進めま ...

3

感想をもっと手軽に、お気軽に。 https://labo.01kawa.com/kansou 素敵なフォロー、フォロワー、創作作家さんに作品の感想を送りたい…!が、語彙力がないという方向けの感想メーカ ...

-WordPress
-