web-dev-qa-db-fra.com

Utilisation des polices d'icône comme marqueurs dans Google Maps V3

Je me demandais s'il était possible d'utiliser des icônes de police d'icônes (par exemple, Font Awesome) comme marqueurs dans Google Maps V3 pour remplacer le marqueur par défaut. Pour les afficher/les insérer dans un document HTML ou PHP, le code du marqueur serait:

<i class="icon-map-marker"></i>
google-maps-api-3google-maps-markersfont-awesomeicon-fonts
48
gfaw

Voici ma tentative de la même chose (en utilisant la bibliothèque d'utilitaires "markerwithlabel") avant de réaliser que Nathan faisait la même chose plus élégamment ci-dessus: http://jsfiddle.net/f3xchecf/

function initialize() {

    var myLatLng = new google.maps.LatLng( 50, 50 ),
        myOptions = {
            zoom: 4,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            },

        map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),

     marker = new MarkerWithLabel({
       position: myLatLng,
       draggable: true,
       raiseOnDrag: true,
       icon: ' ',
       map: map,
         labelContent: '<i class="fa fa-send fa-3x" style="color:rgba(153,102,102,0.8);"></i>',
       labelAnchor: new google.maps.Point(22, 50)
     });

    marker.setMap( map );
}

initialize();
29
Jason

Je viens d'avoir le même problème - a décidé de faire une conversion rapide et sale et hôte sur github.

https://github.com/nathan-muir/fontawesome-markers

Vous pouvez inclure manuellement le fichier JS ou utiliser npm install fontawesome-markers ou bower install fontawesome-markers.

Incluez simplement le fichier javascript fontawesome-markers.min.js et vous pourrez les utiliser comme suit:

new google.maps.Marker({
    map: map,
    icon: {
        path: fontawesome.markers.EXCLAMATION,
        scale: 0.5,
        strokeWeight: 0.2,
        strokeColor: 'black',
        strokeOpacity: 1,
        fillColor: '#f8ae5f',
        fillOpacity: 0.7
    },
    clickable: false,
    position: new google.maps.LatLng(lat, lng)
});

Edit (avril-2016): Il existe maintenant des packages pour v4.2 -> v4.6.1

80
nathan-m

Je sais que ceci est un ancien post, mais juste au cas où vous pouvez utiliser maintenant l'objet MarkerLabel:

var marker = new google.maps.Marker({
    position: location,
    map: map,
    label: {
        fontFamily: 'Fontawesome',
        text: '\uf299'
    }
});

Travaillé pour moi 

See fontawesome icon on google map marker.

Référence Google Maps Maker

33
guido

Dans un navigateur moderne, on peut utiliser le canevas pour rendre la police au format png, puis utiliser le schéma d'URI des données:


  function getIcon(glyph, color) {
    var canvas, ctx;
    canvas = document.createElement('canvas');
    canvas.width = canvas.height = 20;
    ctx = canvas.getContext('2d');
    if (color) {
      ctx.strokeStyle = color;
    }
    ctx.font = '20px FontAwesome';
    ctx.fillText(glyph, 0, 16);
    return canvas.toDataURL();
  }

Par exemple: getIcon("\uf001") pour la note de musique.

13
Roman

La solution légère

  • fontawesome-markers: 480kb
  • markerwithlabel: 25kb

Pour éviter ces dépendances, accédez simplement à fontawesome-markers , recherchez le chemin d'accès à l'icône souhaitée et incluez-le comme suit: 

var 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-.576 1.188-1.71 1.872t-2.43.684-2.43-.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",
    fillColor: '#E32831',
    fillOpacity: 1,
    strokeWeight: 0,
    scale: 0.65
}

marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    icon: icon
});
11
Jeremy Lynch

Si vous voulez the awesomefont MARKER avec une icone awesomefont INSON:

1. copier le chemin SVG du marqueur awesomefont (cliquer sur télécharger et copier le chemin SVG) et l'utiliser comme icon (n'oubliez pas de créditer les auteurs, voir licence . .__ Ensuite, vous pouvez changer sa couleur en tout ce que vous voulez.

2. En tant que label, vous insérez uniquement le code d'icône de police génial et la couleur souhaitée.

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="map"></div>
<script>
  function init() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(51.509865, -0.118092)
    });
    var icon = {
        path: "M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0z", //SVG path of awesomefont marker
        fillColor: '#333333', //color of the marker
        fillOpacity: 1,
        strokeWeight: 0,
        scale: 0.09, //size of the marker, careful! this scale also affects anchor and labelOrigin
        anchor: new google.maps.Point(200,510), //position of the icon, careful! this is affected by scale
        labelOrigin: new google.maps.Point(205,190) //position of the label, careful! this is affected by scale
    }

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      icon: icon,
      label: {
        fontFamily: "'Font Awesome 5 Free'",
        text: '\uf0f9', //icon code
        fontWeight: '900', //careful! some icons in FA5 only exist for specific font weights
        color: '#FFFFFF', //color of the text inside marker
      },
    });
  }
  google.maps.event.addDomListener(window, 'load', init);
</script>

1
Matej P.

J'ai mis en place une bibliothèque JS simple qui génère des marqueurs Nice SVG à l'aide des icônes Font Awesome. https://github.com/jawj/MapMarkerAwesome

0
jawj