2011-11-29 77 views
0

我只是想根據一個xml文件設置一些標記,並另外創建三個不同的標記clusterer與自己的圖標!Google Maps API - Marker Clusterer

的問題是:

  • 沒有標記顯示
  • 我怎麼有我自己的圖標來實現三個標記組(標記聚類器)

的index.html

<html> 
<head> 
<title>Google Maps Integration</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script> 
<script type="text/javascript" src="js/data.json"></script> 
<script type="text/javascript" src="js/markerclusterer.js"></script> 
<script type="text/javascript" src="js/markers.js"></script> 
</head> 
<body> 
<div id="map"></div> 
</body> 
</html> 

個marker.js

$(document).ready(function() { 
    $("#map").css({ 
     height: 675, 
     width: 659 
    }); 
    var myLatLng = new google.maps.LatLng(51.918, 4.47663); 
    MYMAP.init('#map', myLatLng, 7); 
    MYMAP.placeMarkers("markers.xml"); // xml data 
}); 

var MYMAP = { 
    map: null, 
} 

MYMAP.init = function(selector, latLng, zoom) { 
    var myOptions = { 
    zoom:zoom, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    this.map = new google.maps.Map($(selector)[0], myOptions); 
} 

// set markers 
MYMAP.placeMarkers = function(filename) { 
    var markers = []; // create new array for marker points 
    $.get(filename, function(xml){ 
     $(xml).find("marker").each(function(){ 
      var name = $(this).find('name').text(); 
      var address = $(this).find('address').text(); 

      // create a new LatLng point for the marker 
      var lat = $(this).find('lat').text(); 
      var lng = $(this).find('lng').text(); 
      var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng)); 

      // set marker new 
      var marker = new google.maps.Marker({position: point}); 
      markers.push(marker); 

      // set marker info 
      var infoWindow = new google.maps.InfoWindow(); 
      var html='<b>'+name+'</b><br>'+address; 
      google.maps.event.addListener(marker, 'click', function() { 
       infoWindow.setContent(html); 
       infoWindow.open(MYMAP.map, marker); 
      }); 

     }); 
     var markerCluster = new MarkerClusterer(map, markers); 
    }); 

} 
google.maps.event.addDomListener(window, 'load', initialize); 

marker.xml

<?xml version="1.0"?> 
<markers> 
    <marker> 
     <name>Heineken Amsterdam</name> 
     <address>Joop Geesinkweg 5</address> 
     <city>Amsterdam</city> 
     <postcode>1096 AT</postcode> 
     <lat>52.3354</lat> 
     <lng>4.92938</lng> 
     </marker> 
</markers> 
+0

有沒有人可以幫助我? – burner007

回答