Google Maps API v3 - marqueurs de directions personnalisées

Question

Comment remplacer les marqueurs de directions (et non les marqueurs de carte) dans google maps api v3?

Je ne l'ai pas vu des exemples où ...

Answer 1

Parfois, la simplicité est la clé.

je répondu à ma question en utilisant css:

La Une ligne est une table:

<table id="adp-placemark" class="adp-placemark" jstcache="0"> 

et la ligne B est:

<table class="adp-placemark" jstcache="0"> 

Ainsi, le css suivant va changer les marqueurs :

#adp-placemark img, .adp-placemark img { 
    display:none; 
} 
#adp-placemark { 
    font-weight: bold; 
    padding: 10px 10px 10px 30px; 
    background: white url(../images/map_icons/number_1.png) no-repeat left center; 
} 
.adp-placemark { 
    font-weight: bold; 
    padding: 10px 10px 10px 30px; 
    background: white url(../images/map_icons/number_2.png) no-repeat left center; 
} 

Answer 2

J'ai eu le même problème. Similaire à la solution de Jason d'utiliser CSS, j'ai utilisé jQuery pour remplacer manuellement les images d'icône avec mes propres images d'icône. Cela me permet d'utiliser la même image d'icône dans les cartes et dans les directions. Cela me permet également d'utiliser des gestionnaires de clics pour ouvrir la même fenêtre d'informations lorsque le marqueur est cliqué dans le panneau de carte ou de directions. J'utilise différentes icônes pour la maison et l'emplacement final et j'utilise des marqueurs de numéros ascendants pour les waypoints. La mise en garde ennuyeuse était que je devais utiliser une minuterie JavaScript pour attendre 1,5 secondes afin que je puisse être sûr que les directions ont terminé le rendu depuis son asynchrone et il n'y a pas de rappel pour cela. Les images ne peuvent pas être remplacées tant qu'elles ne sont pas ajoutées au DOM. Voici mon code:

function renderDrivingDirections(directionsResponse){ 
    var directionRenderOptions = { 
      map: map, 
      panel: directionsPanel, 
      suppressInfoWindows: true, 
      suppressMarkers: true 
    }; 
    var directionsRenderer = new google.maps.DirectionsRenderer(directionRenderOptions); 
    directionsRenderer.setDirections(directionsResponse); 
    /* Replace the default map markers with custom ones for following reasons: 
     1) Control over icon. (Custom icons for start and finish) 
     2) Control over icon color (to match the action status) 
     3) Control infowindow that opens on marker click (Add Call/Action, add link to action details) 
     However, we using the default rendering for the lines, and for text output of directions. So we need to wait 1.5 seconds after load 
    */ 
    window.setTimeout( 
      function(){ 
       showWaypointMarkers(directionsResponse); 
       showOriginDestinationMarkers(); 
      }, 
      1500 
    ); 
} 

function showWaypointMarkers(directionsResponse) { 
    var routeLegs = directionsResponse.routes[0].legs; 
    var allImages = jQuery(directionsPanel).find("img"); 
    for (var i = 0, len = routeLegs.length -1; i < len; i++) { 
     var iconUrl = "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=" + (i+1) + "|ffffff|000000"; 
     var marker = new google.maps.Marker({ 
      position: routeLegs[i+1].start_location, 
      map: map, 
      title: "Stop number: " + i, 
      icon: {url: iconUrl} 
     }); 
     var iconImageObj = jQuery("<img src='" + iconUrl + "'>"); 
     attachInfoWindow(marker, iconImageObj, i, routeLegs[i+1]);    
     allImages.eq(i+1).replaceWith(iconImageObj); 
    } 
} 

function attachInfoWindow(marker, iconImageObj, legIndex, leg) { 
    var infowindow = new google.maps.InfoWindow({ 
     content: "<div><h3>Stop Number: " + legIndex + "</h3><p>" + leg.start_address + "</p><a href='#'>(Stop Details)</a></div>" 
    }); 
    google.maps.event.addListener(marker, 'click', function(){ //when the marker on map is clicked open info-window 
     infowindow.open(map,marker); 
    }); 
    iconImageObj.click(function(){ //when the marker on the driving directions is clicked, open info-window 
     infowindow.open(map,marker); 
    }); 
} 
function showOriginDestinationMarkers(){ //here using same icon for first and last 
    var iconUrl = "https://chart.googleapis.com/chart?chst=d_map_pin_icon_withshadow&chld=home|000000|FFFFFF"; //home icon 
    new google.maps.Marker({ //add home location to map 
     position: homeLocation, 
     map: map, 
     title: messages.homeLocationTitle, 
     icon: {url: iconUrl} 
    }); 
    jQuery(directionsPanel, "img").first().replaceWith("<img src='" + iconUrl + "'>"); //replace their icon with ours 
    jQuery(directionsPanel, "img").last().replaceWith("<img src='" + iconUrl + "'>"); //replace their icon with ours 
} 

Pour éviter d'utiliser une minuterie je besoin d'analyser les directions et les afficher moi-même. Les fenêtres d'informations ont un texte personnalisé basé sur le waypoint et un lien vers une page de détails.