web-dev-qa-db-fra.com

Comment créer un marqueur avec une icône personnalisée pour Google Maps API v3?

J'ai lu https://developers.google.com/maps/documentation/javascript/overlays depuis un moment maintenant et je n'arrive pas à obtenir une icône personnalisée pour le fonctionnement de ma carte.

Voici mon javascript:

var simplerweb = new google.maps.LatLng(55.977046,-3.197118);
var marker;
var map;

function initialize() {
    var myOpts = {
        center:    simplerweb,  
        zoom:      15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOpts);
    marker = new google.maps.Marker({
        map:        map,
        draggable:  true,
        animation:  google.maps.Animation.DROP,
        position:   simplerweb
    });
    google.maps.event.addListener(marker, 'click', toggleBounce);
}

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

Des conseils pour un débutant complet avec des gmaps?

javascriptgoogle-maps-api-3google-maps-markers
15
andy
marker = new google.maps.Marker({
    map:map,
    // draggable:true,
    // animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(59.32522, 18.07002),
    icon: 'http://cdn.com/my-custom-icon.png' // null = default icon
  });
36
Luca Filosofi

Essayer

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      icon: 'http://imageshack.us/a/img826/9489/x1my.png',
      map: map
    });

d'ici

https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom

6
Aor Ampika

Symbole que vous voulez sur la couleur que vous voulez!

Je cherchais cette réponse depuis des jours et voici la manière la plus simple et la plus simple de créer un marqueur personnalisé:

' http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=xxx%7c5680FC%7c000000&.png ' où xxx est le texte et 5680fc est le code de couleur hexadécimal de l'arrière-plan et 000000 est le code couleur hexadécimal du texte.

Ces marqueurs sont totalement dynamiques et vous pouvez créer l'icône de ballon que vous souhaitez. Modifiez simplement l'URL.

3
Paolo177