谷歌地圖：每個標記的自定義圖標和標籤

Question

我是Google地圖新手！

我發現了一個代碼，使用JQuery & xml顯示帶有多個標記的Google地圖。

看直播Example

我有一個像我用這

$(document).ready(function() { 
    $("#map").css({ 
     height: 500, 
     width: 800 
    }); 
    var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267); 
    MYMAP.init('#map', myLatLng, 11); 

    $("#map"); 
     MYMAP.placeMarkers('markers.xml'); 
    }); 

var MYMAP = { 
    map: null, 
    bounds: 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); 
    this.bounds = new google.maps.LatLngBounds(); 
} 

MYMAP.placeMarkers = function(filename) { 
    $.get(filename, function(xml){ 
     $(xml).find("marker").each(function(){ 
      var name = $(this).find('name').text(); 
      var address = $(this).find('address').text();         

         var icon = $(this).find('icon').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)); 

      // extend the bounds to include the new point 
      MYMAP.bounds.extend(point); 

      var marker = new google.maps.Marker({         
       position: point, 
       map: MYMAP.map 
      }); 



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

& XML代碼marker.js。

<marker> 
<name>.hu</name> 
<address>near Viswa Teja School, Thatichetlapalem, Visakhapatnam</address> 
<lat>47.29</lat> 
<lng>19.05</lng> 
</marker> 

我要的是自定義標記圖標&警示標籤每個標記。

是否可以在上面的代碼中工作？

或我該如何做到這一點？

謝謝。

Answer 1

經過大量的谷歌搜索&試驗我終於解決了這個問題。一個更簡單的方法來 自定義您的Gmaps。

希望這會幫助像我這樣的新手！

DEMO HERE

謝謝！

Answer 2

你可以像下面這樣做：

new google.maps.Marker({ 
     position: new google.maps.LatLng(latitude, longitude), 
     map: MYMAP.map, 
     icon: new google.maps.MarkerImage("<REPLACE_WITH_MARKER_IMAGE_URL>")}); 

而且，here是相關文檔。