ピンを挿したいということですので、常に動的にピンを取得して表示させていきたいということでないのであればWordPressの管理画面の投稿作成エリアに、例えば
0. ピンの位置情報
0. タイトル
0. infoWindowを使用するのであれば、そこに表示させる内容
を登録させるカスタムフィールドを作成します。
後は、表示させるページで、各投稿で保存されている、ピンの位置情報などのカスタムフィールドを取得して、javascriptのオブジェクトのデータとして出力してあげればOKではないでしょうか?
簡単なサンプルを示します。
javascript
1!function() {
2 // ピン(マーカー)のデータ
3 var myMarkers = [
4 <?php foreach(...) : ?>
5 /* 下記の形式でピンの位置情報などカスタムフィールドから取得して出力する
6 {
7 position: [60.142568, 24.989571],
8 title: 'Submarine Vesikko'
9 },
10 */
11 <?php endforeach; ?>
12 ];
13
14 function initialize() {
15 // 地図の中心位置 好きな所にしてください
16 var myLatlng = new google.maps.LatLng(60.1500745,24.978537);
17
18 // Map Options
19 var mapOptions = {
20 center: myLatlng,
21 zoom: 14
22 };
23
24 // Map
25 var map = new google.maps.Map(document.getElementById('map-canvas'),
26 mapOptions);
27
28 // Add markers
29 for(var i=0, l=myMarkers.length; i<l; i+=1) {
30 var markerData = myMarkers[i],
31 marker = new google.maps.Marker({
32 position: new google.maps.LatLng( markerData.position[0], markerData.position[1] ),
33 title: markerData.title,
34 map: map
35 });
36 }
37 }
38
39 google.maps.event.addDomListener(window, 'load', initialize);
40}();
動的に取得させて表示させたいということであれば、Ajaxでアクセスした際にカスタムフィールドの値を返すAPIになるページを作成してあげればよいかと思います。
手前味噌で恐縮ですがgoogleMapのカスタマイズ関連の参考になれば
Google Map 埋め込んだ地図にピン(マーカー)を打ちまくりたい。ついでに色々カスタマイズしてみた。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/09/03 07:31