WordPress and Google Maps

Integrating WordPress and Google Maps API V.3

免費下載 WordPress 中文佈景主題開發指南（PDF 電子書）

map.js 注意png的路徑與locations應改為源自於php的json輸入

  
var infowindow = new google.maps.InfoWindow();
var pinkmarker = new google.maps.MarkerImage('./wp-content/themes/yourthemes/pink_Marker.png', new google.maps.Size(20, 34) );
var shadow = new google.maps.MarkerImage('./wp-content/themes/yourthemes/shadow.png', new google.maps.Size(37, 34) );

function initialize() {

 //document.getElementById('map').index = 1;
 map = new google.maps.Map(document.getElementById('map_canvas'), { 
  
  zoom: 8, 
  //center: new google.maps.LatLng,
  center: new google.maps.LatLng(23.714954,  120.99359),  //23.714954, 120.99359); //南投縣信義鄉
  mapTypeId: google.maps.MapTypeId.ROADMAP, 
      // zoomControl: true,
      // zoomControlOptions: {
      //     style: google.maps.ZoomControlStyle.LARGE,
      //     position: google.maps.ControlPosition.RIGHT_CENTER
      // }
 });


      var locations = [
      {
        latlng : new google.maps.LatLng(25.0336148,  120.56480220000003)
      
      },
      {
        latlng : new google.maps.LatLng(25.0336148,  121.56480220000003)
      
      }

    ];


   for (var i = 0; i < locations.length; i++) {  
    var marker = new google.maps.Marker({
        position: locations[i].latlng,
     icon: pinkmarker,
     shadow: shadow,
     map: map
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i].info);
        infowindow.open(map, marker);
      }
    })(marker, i));
   }


}

index.php 首頁版本

page.php 分頁版本

Pages » Front Page