Добавление пользовательского маркера google map/pin (color)

Question

Я сделал довольно приличное получение некоторых настроек карты Google; но мне интересно, где/или что я могу добавить ниже, чтобы просто изменить маркер карты/значок/значок. Я действительно пытаюсь просто изменить цвет; но создаст образ и сделаю так, если нужно.

Ниже приведено то, с чем я работаю; веселит/

window.onload = function() { 

function initialize() { 
    var stylez = [ 
     { 
     featureType: "all", 
     stylers: [ 
      { hue: "#c3c367" }, 
      { saturation: -75 } 
     ] 
     }, 
     { 
     featureType: "poi", 
     elementType: "label", 
     stylers: [ 
      { visibility: "off" } 
     ] 
     } 
    ]; 

    var latlng = new google.maps.LatLng(34.101958, -118.327925), // toggle per data 

     mapOptions = { 
      mapTypeControlOptions: { 
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, "Edited"] 
      }, 
      zoom: 14, 
      center: latlng 
     }, 

     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions), 

     styledMapType = new google.maps.StyledMapType(stylez, {name: "Edited"}), 

     marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      animation: google.maps.Animation.DROP, 
      title:"Hello World!" 
     }), 

     infowindow = new google.maps.InfoWindow({ 
      content: "<div><img width='50' height='50' src='assets/icos/homico.png'</div>" 
     }); 

     map.mapTypes.set("Edited", styledMapType); 
     map.setMapTypeId('Edited'); 

    function toggleBounce() { 
     if (marker.getAnimation() != null) { 
      marker.setAnimation(null); 
     } else { 
      marker.setAnimation(google.maps.Animation.BOUNCE); 
     } 
    } 

    // Add click listener to toggle bounce 
    google.maps.event.addListener(marker, 'click', function() { 
     toggleBounce(); 
     infowindow.open(map, marker); 
     setTimeout(toggleBounce, 1500); 
    }); 
} 

// Call initialize -- in prod, add this to window.onload or some other DOM ready alternative 
initialize(); 

}; 

Answer 1

Вам просто нужно добавить

"icon": "url" 

к вашей декларации маркера. Так Это:

marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     animation: google.maps.Animation.DROP, 
     title:"Hello World!" 
    }) 

становится:

marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: yourIconUrl, 
     animation: google.maps.Animation.DROP, 
     title:"Hello World!" 
    }) 

Answer 2

Я уже отвечал на подобный вопрос here, это решить вашу проблему?

Вы можете настроить свой собственный маркер, используя этот URL:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|00FF00|000000 

chld параметром является буква появится в вашем маркере.
После того, как труба, первый код RGB, если цвет маркера, второй цвет фона маркера. Последний вариант является необязательным.

Таким образом, вы можете создать свой маркер, как это:

var myPin= new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=D|00FF00|000000"); 

и использовать его, как вы хотите!

Answer 3

Вам нужно создать MarkerImage:

var image = new google.maps.MarkerImage(img_path+'marker.png', 
    // This marker is 48 pixels wide by 48 pixels tall. 
    new google.maps.Size(24, 24), 
    // The origin for this image is 0,0. 
    new google.maps.Point(0,0), 
    // The anchor for this image is the base of the flagpole at 12,24. 
    new google.maps.Point(12, 24) 
); 

размеров изображения и узловую точку поставит свой собственный значок на правильном месте

и указать значок при создании маркеров:

var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: image, 
     //(...) 
});