Comment utiliser les marqueurs SVG dans Google Maps API v3

Puis-je utiliser mon image.svg converti comme icône de carte Google. Je convertissais mon image png en svg et je veux utiliser ce symbole de carte google qui peut être pivoté. J’ai déjà essayé d’utiliser le symbole Google Map mais je veux avoir une icône comme voiture, homme, etc … C’est pourquoi j’ai converti mes fichiers png en svg, tout comme cet exemple utilise ce http: / /www.goprotravelling.com/

Vous pouvez rendre votre icône en utilisant la notation SVG Path .

Voir la documentation Google pour plus d’informations.

Voici un exemple de base:

var icon = { path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0", fillColor: '#FF0000', fillOpacity: .6, anchor: new google.maps.Point(0,0), strokeWeight: 0, scale: 1 } var marker = new google.maps.Marker({ position: event.latLng, map: map, draggable: false, icon: icon }); 

Voici un exemple pratique sur la façon d’afficher et de mettre à l’échelle un marqueur Icône SVG:

Démo JSFiddle

Modifier:

Un autre exemple avec une icône complexe:

Démo JSFiddle

Edit 2:

Et voici comment vous pouvez avoir un fichier SVG en tant qu’icône:

Démo JSFiddle

Si vous avez besoin d’un svg complet, non seulement un chemin d’access et que vous souhaitez qu’il soit modifiable côté client (par exemple, modification du texte, masquage des détails, …), vous pouvez utiliser une autre URL avec svg inclus:

 var svg = ''; icon.url = 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg); 

JavaScript (Firefox) btoa () est utilisé pour obtenir l’encodage base64 à partir du texte SVG. Vous pouvez également utiliser http://dopiaza.org/tools/datauri/index.php pour générer des URL de données de base.

Voici un exemple complet :

        

Des informations supplémentaires peuvent être trouvées ici .

Évitez l’encodage base64:

Pour éviter l’encodage base64, vous pouvez remplacer 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svg) avec 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg)

Cela devrait fonctionner avec les navigateurs modernes jusqu’à IE9. L’avantage est encodeURIComponent est une fonction js par défaut et disponible dans tous les navigateurs modernes. Vous pouvez également obtenir des liens plus petits mais vous devez tester cela et envisager d’utiliser ' au lieu de " dans votre svg.

Voir également Optimisation des SVG dans les URI de données pour plus d’informations.

Support IE: Afin de supporter les marqueurs SVG dans IE, deux petites adaptations sont nécessaires, comme décrit ici: Marqueurs SVG dans IE . J’ai mis à jour l’exemple de code pour prendre en charge IE.

Je sais que cet article est un peu vieux, mais j’ai vu tellement de mauvaises informations à ce sujet que je pouvais crier. Donc, je dois juste jeter mes deux cents avec une approche complètement différente que je connais, car je l’utilise de manière fiable sur de nombreuses cartes. En plus de cela, je pense que l’OP voulait pouvoir faire pivoter le marqueur de flèche autour du sharepoint la carte, ce qui est différent de faire pivoter l’icône autour de son axe X, y compris le pointeur de la flèche.

Premièrement, rappelez-vous que nous jouons avec Google maps et SVG, nous devons donc nous adapter à la manière dont Google déploie son implémentation de SVG pour les marqueurs (ou réellement les symboles). Google définit son ancre pour l’image du marqueur SVG à 0,0, ce qui n’est pas le coin supérieur gauche de la vue SVG. Pour contourner ce problème, vous devez dessiner votre image SVG un peu différemment pour donner à Google ce qu’il veut … Oui, la réponse réside dans la façon dont vous créez le chemin SVG dans votre éditeur SVG (Illustrator, Inkscape, etc. .).

La première étape consiste à se débarrasser de la viewBox. Cela peut être fait en définissant le viewBox dans votre XML à 0 … c’est vrai, juste un zéro au lieu des quatre arguments habituels pour le viewBox. Cela désactive la vue (et oui, cela est sémantiquement correct). Vous remarquerez probablement que la taille de votre image saute immédiatement lorsque vous faites cela, car le svg n’a plus de base (la vue) pour mettre l’image à l’échelle. Nous créons donc cette référence directement, en définissant la largeur et la hauteur au nombre réel de pixels que vous souhaitez que votre image soit dans l’éditeur XML de votre éditeur SVG.

En définissant la largeur et la hauteur de l’image svg dans l’éditeur XML, vous créez une ligne de base pour la mise à l’échelle de l’image, et cette taille devient par défaut une valeur de 1 pour les propriétés de l’échelle du marqueur. Vous pouvez voir l’avantage que cela présente pour la mise à l’échelle dynamic du marqueur.

Maintenant que vous avez la taille de votre image, déplacez l’image jusqu’à ce que la partie de l’image que vous souhaitez avoir comme ancre dépasse les coordonnées 0,0 de l’éditeur svg. Une fois que vous avez fait cela, copiez la valeur de l’atsortingbut d du chemin svg. Vous remarquerez que la moitié des nombres sont négatifs, ce qui est le résultat de l’alignement de votre point d’ancrage pour le 0,0 de l’image au lieu du viewBox.

Utiliser cette technique vous permettra alors de faire pivoter le marqueur correctement, autour du point lat et lng de la carte. C’est le seul moyen fiable de lier le point sur le marqueur svg que vous souhaitez au lat et au long de l’emplacement du marqueur.

J’ai essayé de faire un JSFiddle pour cela , mais il y a un bogue dans l’implémentation, une des raisons pour lesquelles je n’aime pas trop le code réinterprété. Au lieu de cela, j’ai inclus un exemple entièrement autonome ci-dessous que vous pouvez essayer, adapter et utiliser comme référence. Ceci est le même code que j’ai essayé à JSFiddle qui a échoué, mais il traverse Firebug sans gémissement.

        Create Draggable and Rotatable SVG Marker      
Enter heading to rotate marker     Heading°     Drag marker to place marker

C’est exactement ce que Google fait pour ses quelques symboles disponibles dans la classe SYMBOL de l’API Maps, donc si cela ne vous convainc pas … En tout cas, j’espère que cela vous aidera à créer et configurer un marqueur SVG pour vos cartes Google se terminent.

Oui, vous pouvez utiliser un fichier .svg pour l’icône, tout comme vous pouvez le faire pour un fichier .png ou un autre format de fichier d’image. Il suffit de définir l’URL de l’icône dans le répertoire où se trouve le fichier .svg. Par exemple:

 var icon = { url: 'path/to/images/car.svg', size: new google.maps.Size(sizeX, sizeY), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(sizeX/2, sizeY/2) }; var marker = new google.maps.Marker({ position: event.latLng, map: map, draggable: false, icon: icon }); 

Les choses vont mieux, maintenant vous pouvez utiliser des fichiers SVG.

  marker = new google.maps.Marker({ position: {lat: 36.720426, lng: -4.412573}, map: map, draggable: true, icon: "img/tree.svg" }); 

Comme mentionné par d’autres dans ce fil, n’oubliez pas de définir explicitement les atsortingbuts width et height dans le svg comme suit:

  

Si vous ne le faites pas, aucune manipulation de js ne peut vous aider, car gmaps n’aura pas de cadre de référence et utilisera toujours une taille standard.

(Je sais que cela a été mentionné dans certains commentaires, mais ils sont faciles à manquer. Cette information m’a aidé dans divers cas)

D’ACCORD! Je l’ai fait bientôt sur mon site, j’essaie deux façons de créer le marqueur Google Map personnalisé, ce code d’exécution utilise canvg.js est la meilleure compatibilité pour le navigateur. Le code commenté n’est pas compatible avec IE11.

 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 = $("
"); var svg = $( '' + '' + '' + '' + text + '' + '' ); div.append(svg); var dd = $(""); var svgHtml = div[0].innerHTML; canvg(dd[0], svgHtml); var imgSrc = dd[0].toDataURL("image/png"); //"scaledSize" and "optimized: false" together seems did the sortingcky ---IE11 && viewBox influent IE scaledSize //var svg = '' // + '' // + '' // + '' + text + '' // + ''; //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; };
     Your Custom Marker     

Vous devez passer optimized: false .

Par exemple

 var img = { url: 'img/puff.svg', scaledSide: new google.maps.Size(5, 5) }; new google.maps.Marker({position: this.mapOptions.center, map: this.map, icon: img, optimized: false,}); 

Sans passer optimized: false , mon svg est apparu comme une image statique.