API 3 de Google Maps - Couleur du marqueur personnalisé pour le marqueur par défaut (points)
J'ai vu beaucoup d'autres questions similaires à celle-ci ( ici , ici et ici ), mais elles ont toutes accepté des réponses qui ne résolvent pas mon problème. La meilleure solution que j'ai trouvée au problème est la bibliothèque StyledMarker , qui vous permet de définir des couleurs personnalisées pour les marqueurs, mais je ne parviens pas à utiliser le marqueur par défaut recherche de cartes - avec un point au milieu), il semble simplement fournir aux marqueurs une lettre ou une icône spéciale.
Vous pouvez demander de manière dynamique des images d'icônes à partir de Google charts api avec les URL:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569
Qui ressemble à ceci: 
l’image est 21x34 pixels et l’aiguille est en position (10, 34)
Et vous aurez également besoin d’une image ombrée distincte (pour qu’elle ne recouvre pas les icônes proches):
http://chart.apis.google.com/chart?chst=d_map_pin_shadow
Qui ressemble à ceci: 
l’image est 40x37 pixels et l’aiguille est en position (12, 35)
Lorsque vous construisez votre MarkerImage s, vous devez définir la taille et les points d'ancrage en conséquence:
var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
Vous pouvez ensuite ajouter le marqueur à votre carte avec:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
icon: pinImage,
shadow: pinShadow
});
Remplacez simplement "FE7569" par le code de couleur que vous recherchez. Par exemple: 
Crédit dû à Jack B Nimble pour l'inspiration;)
Si vous utilisez Google Maps API v3, vous pouvez utiliser setIcon par exemple.
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
Ou dans le cadre du marqueur init:
marker = new google.maps.Marker({
icon: 'http://...'
});
Autres couleurs:
Utilisez le code suivant pour mettre à jour les marqueurs par défaut avec des couleurs différentes.
(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)
Voici une solution intéressante utilisant l'API Gooogle Maps elle-même. Pas de service externe, pas de bibliothèque supplémentaire. Et cela permet des formes personnalisées et de multiples couleurs et styles. La solution utilise des marqueurs vectoriels, qui appellent googlemaps api Symbols .
Outre le nombre limité et limité de symboles prédéfinis, vous pouvez créer n'importe quelle forme de n'importe quelle couleur en spécifiant une chaîne de chemin SVG ( Spec ).
Pour l'utiliser, au lieu de définir l'option de marqueur «icône» sur l'URL de l'image, définissez-la sur un dictionnaire contenant les options du symbole. Par exemple, j'ai réussi à créer un symbole assez similaire au marqueur standard:
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1,
};
}
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
icon: pinSymbol("#FFF"),
});
Si vous veillez à conserver le point clé de la forme à 0,0, vous évitez de définir les paramètres de centrage des icônes de marqueur. Autre exemple de chemin, le même marqueur sans le point:
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
Et voici un drapeau de couleur très simple et très laid:
path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',
Vous pouvez également créer les chemins en utilisant un outil visuel tel que Inkscape (GNU-GPL, multiplateforme). Quelques astuces utiles:
- Google API n'accepte qu'un seul chemin. Vous devez donc transformer tout autre objet (carré, cercle, etc.) en chemin et les joindre en un seul. Les deux commandes du menu Path.
- Pour déplacer le chemin vers le (0,0), accédez au mode Modification de chemin (F2), sélectionnez tous les nœuds de contrôle Et faites-les glisser. Déplacer l'objet avec F1 ne changera pas les coordonnées du nœud du chemin.
- Pour vous assurer que le point de référence est à (0,0), vous pouvez le sélectionner seul et modifier les coordonnées à la main dans la barre d'outils supérieure.
- Après avoir enregistré le fichier SVG, qui est un fichier XML, ouvrez-le à l'aide d'un éditeur, recherchez l'élément svg: path et copiez le contenu de l'attribut 'd'.
Eh bien, la chose la plus proche que j'ai pu obtenir avec le StyledMarker est this .
La balle au milieu n'est pas assez grosse comme celle par défaut. La classe StyledMarker construit simplement cette URL et demande à l'API Google de créer le marqueur.
A partir de exemple d'utilisation de classe }, utilisez "% E2% 80% A2" comme texte, comme dans:
var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
Vous devrez modifier StyledMarker.js pour commenter les lignes:
if (text_) {
text_ = text_.substr(0,2);
}
car cela réduira la chaîne de texte à 2 caractères.
Vous pouvez également créer des images de marqueur personnalisées en fonction du modèle par défaut avec les couleurs souhaitées et remplacer le marqueur par défaut par un code tel que:
marker = new google.maps.Marker({
map:map,
position: latlng,
icon: new google.maps.MarkerImage(
'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
new google.maps.Size(24, 24),
new google.maps.Point(0, 0),
new google.maps.Point(0, 24)
)
});
Bonjour, vous pouvez utiliser icon as SVG et définir les couleurs. Voir ce code
/*
* declare map and places as a global variable
*/
var map;
var places = [
['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
* use google maps api built-in mechanism to attach dom events
*/
google.maps.event.addDomListener(window, "load", function () {
/*
* create map
*/
var map = new google.maps.Map(document.getElementById("map_div"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
/*
* create infowindow (which will be used by markers)
*/
var infoWindow = new google.maps.InfoWindow();
/*
* create bounds (which will be used auto zoom map)
*/
var bounds = new google.maps.LatLngBounds();
/*
* marker creater function (acts as a closure for html parameter)
*/
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
bounds.extend(options.position);
if (html) {
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(options.map, this);
map.setZoom(map.getZoom() + 1)
map.setCenter(marker.getPosition());
});
}
return marker;
}
/*
* add markers to map
*/
for (var i = 0; i < places.length; i++) {
var point = places[i];
createMarker({
position: new google.maps.LatLng(point[2], point[3]),
map: map,
icon: {
path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
scale: 0.6,
strokeWeight: 0.2,
strokeColor: 'black',
strokeOpacity: 1,
fillColor: point[4],
fillOpacity: 0.85,
},
}, point[1]);
};
map.fitBounds(bounds);
});<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>J'ai étendu la réponse de vokimon un peu, ce qui le rend un peu plus pratique pour modifier d'autres propriétés.
function customIcon (opts) {
return Object.assign({
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
fillColor: '#34495e',
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1,
}, opts);
}
Usage:
marker.setIcon(customIcon({
fillColor: '#fff',
strokeColor: '#000'
}));
Ou lors de la définition d'un nouveau marqueur:
const marker = new google.maps.Marker({
position: {
lat: ...,
lng: ...
},
icon: customIcon({
fillColor: '#2ecc71'
}),
map: map
});
depuis la version 3.11 de l'API Google Maps, l'objet Icon remplace MarkerImage. Icon supporte les mêmes paramètres que MarkerImage. J'ai même trouvé que c'était un peu plus simple.
Un exemple pourrait ressembler à ceci:
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
Origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
pour plus d'informations consultez ce site
Dans Internet Explorer, cette solution ne fonctionne pas en ssl.
On peut voir l’erreur dans la console comme suit:
SEC7111: la sécurité HTTPS est compromise par this ,
Solution de contournement: L'un des utilisateurs suggère de remplacer chart.apis.google.com à chart.googleapis.com pour le chemin de l'URL afin d'éviter une erreur SSL.
Vous pouvez utiliser ce code cela fonctionne bien.
var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>
var marker = new google.maps.Marker({
position: yourlatlong,
icon: pinImage,
map: map
});
Combinez un marqueur basé sur un symbole dont le chemin dessine le contour, avec un caractère '●' pour le centre. Vous pouvez remplacer le point par un autre texte ('A', 'B', etc.) à votre guise.
Cette fonction renvoie des options pour un marqueur avec le texte (le cas échéant), la couleur du texte et la couleur de remplissage donnés. Il utilise la couleur du texte pour le contour.
function createSymbolMarkerOptions(text, textColor, fillColor) {
return {
icon: {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: fillColor,
fillOpacity: 1,
strokeColor: textColor,
strokeWeight: 1.8,
labelOrigin: { x: 0, y: -30 }
},
label: {
text: text || '●',
color: textColor
}
};
}
J'essaie de deux manières de créer le marqueur de carte personnalisé Google, ce code d'exécution utilisé canvg.js est la meilleure compatibilité pour browser.the Code commenté n'est pas pris en charge par IE11 actuellement.
var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: 59.325,
lng: 18.070
}
});
var markerOption = {
latitude: 59.327,
longitude: 18.067,
color: "#" + "000",
text: "ha"
};
marker = createMarker(markerOption);
marker.setMap(map);
marker.addListener('click', changeColorAndText);
};
function changeColorAndText() {
var iconTmpObj = createSvgIcon( "#c00", "ok" );
marker.setOptions( {
icon: iconTmpObj
} );
};
function createMarker(options) {
//IE MarkerShape has problem
var markerObj = new google.maps.Marker({
icon: createSvgIcon(options.color, options.text),
position: {
lat: parseFloat(options.latitude),
lng: parseFloat(options.longitude)
},
draggable: false,
visible: true,
zIndex: 10,
shape: {
coords: CustomShapeCoords,
type: 'poly'
}
});
return markerObj;
};
function createSvgIcon(color, text) {
var div = $("<div></div>");
var svg = $(
'<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
'<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
'<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
'<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
'</svg>'
);
div.append(svg);
var dd = $("<canvas height='50px' width='50px'></cancas>");
var svgHtml = div[0].innerHTML;
//todo yao gai bu dui
canvg(dd[0], svgHtml);
var imgSrc = dd[0].toDataURL("image/png");
//"scaledSize" and "optimized: false" together seems did the tricky ---IE11 && viewBox influent IE scaledSize
//var svg = '<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
// + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
// + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
// + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
// + '</svg>';
//var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
var iconObj = {
size: new google.maps.Size(32, 43),
url: imgSrc,
scaledSize: new google.maps.Size(32, 43)
};
return iconObj;
};<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your Custom Marker </title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://canvg.github.io/canvg/canvg.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>J'ai essayé pendant longtemps d'améliorer le marqueur dessiné de vokimon et de le rendre plus similaire à celui de Google Maps (et j'ai presque réussi). C'est le code que j'ai eu:
let circle=true;
path = 'M 0,0 C -0.7,-9 -3,-14 -5.5,-18.5 '+
'A 16,16 0 0,1 -11,-29 '+
'A 11,11 0 1,1 11,-29 '+
'A 16,16 0 0,1 5.5,-18.5 '+
'C 3,-14 0.7,-9 0,0 z '+
['', 'M -2,-28 '+
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];
Je l'ai aussi réduit de 0,8.
En utilisant Swift et Google Maps Api v3, c’est la façon la plus simple de le faire:
icon = GMSMarker.markerImageWithColor(UIColor.blackColor())
j'espère que ça aide quelqu'un.
Comme d'autres l'ont mentionné, la réponse de vokimon est excellente, mais malheureusement, Google Maps est un peu lent lorsqu'il existe plusieurs marqueurs SymbolPath/SVG à la fois.
Il semble que l’utilisation d’un URI de données soit beaucoup plus rapide, à peu près au même niveau que les PNG.
De plus, puisqu'il s'agit d'un document SVG complet, il est possible d'utiliser un cercle correctement rempli pour le point. Le chemin est modifié pour qu'il ne soit plus décalé en haut à gauche, il est donc nécessaire de définir l'ancre.
Voici une version modifiée qui génère ces marqueurs:
var coloredMarkerDef = {
svg: [
'<svg viewBox="0 0 22 41" xmlns="http://www.w3.org/2000/svg">',
'<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#000" stroke-width="1.5"/>',
'<circle cx="11" cy="11" r="3"/>',
'</svg>'
].join(''),
anchor: {x: 11, y: 41},
size: {width: 22, height: 41}
};
var getColoredMarkerSvg = function(color) {
return coloredMarkerDef.svg.replace('{fillColor}', color);
};
var getColoredMarkerUri = function(color) {
return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarker(color));
};
var getColoredMarkerIcon = function(color) {
return {
url: getColoredMarkerUri(color),
anchor: coloredMarkerDef.anchor,
size: coloredMarkerDef.size,
scaledSize: coloredMarkerDef.size
}
};
Usage:
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
icon: getColoredMarkerIcon("#FFF"),
});
L'inconvénient, tout comme une image PNG, est que tout le rectangle est cliquable. En théorie, il n’est pas trop difficile de tracer le chemin SVG et de générer un MarkerShape polygone.
Ce sont des marqueurs circulaires de costume
small_red:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC
petit_jeune:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==
small_green:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==
small_blue:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC
small_purple:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==
Ce sont des images 9x9 png .
Une fois qu'ils sont sur votre page, vous pouvez simplement les faire glisser et vous aurez le fichier png réel.
changez-le en chart.googleapis.com pour le chemin, sinon SSL ne fonctionnera pas