web-dev-qa-db-fra.com

Google maps: placer le numéro dans le marqueur?

Comment afficher un nombre dans le marqueur sur une carte Google? Je souhaite effectuer un clustering côté serveur et j'ai besoin d'afficher le nombre de points que le cluster représente.

javascriptgoogle-mapsgisgoogle-maps-markers
38
User
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000'

A l'air bien avec des chiffres à 1 et 2 chiffres

(à partir du lien de Mauro)

43
Jerome Jaglale

Voici des icônes personnalisées avec le style de "rafraîchissement visuel" mis à jour que vous pouvez générer rapidement via un simple script .vbs. J'ai également inclus un grand ensemble pré-généré que vous pouvez utiliser immédiatement avec plusieurs options de couleur: https://github.com/Concept211/Google-Maps-Markers

Utilisez le format suivant lors de la liaison aux fichiers image hébergés par GitHub:

https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_[color][character].png

couleur 

red, black, blue, green, grey, orange, purple, white, yellow

caractère 

A-Z, 1-100, !, @, $, +, -, =, (%23 = #), (%25 = %), (%26 = &), (blank = •)

Exemples:

red1https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_red1.png

blue2https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue2.png

green3https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_green3.png

15
Concept211

Au lieu d'utiliser la solution par défaut ( http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|0000 ), vous pouvez créer ces images comme vous le souhaitez, en utilisant JavaScript sans aucun code côté serveur.

Google google.maps.Marker accepte Base64 pour sa propriété d'icône. Avec cela, nous pouvons créer un Base64 valide à partir d'un SVG.

enter image description here

Vous pouvez voir le code pour produire la même chose que cette image dans ce Plunker: http://plnkr.co/edit/jep5mVN3DsVRgtlz1GGQ?p=preview

var markers = [
  [1002, -14.2350040, -51.9252800],
  [2000, -34.028249, 151.157507],
  [123, 39.0119020, -98.4842460],
  [50, 48.8566140, 2.3522220],
  [22, 38.7755940, -9.1353670],
  [12, 12.0733335, 52.8234367],
];

function initializeMaps() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 4,
    center: myLatLng
  });

  var bounds = new google.maps.LatLngBounds();

  markers.forEach(function(point) {
    generateIcon(point[0], function(src) {
      var pos = new google.maps.LatLng(point[1], point[2]);

      bounds.extend(pos);

      new google.maps.Marker({
        position: pos,
        map: map,
        icon: src
      });
    });
  });

  map.fitBounds(bounds);
}

var generateIconCache = {};

function generateIcon(number, callback) {
  if (generateIconCache[number] !== undefined) {
    callback(generateIconCache[number]);
  }

  var fontSize = 16,
    imageWidth = imageHeight = 35;

  if (number >= 1000) {
    fontSize = 10;
    imageWidth = imageHeight = 55;
  } else if (number < 1000 && number > 100) {
    fontSize = 14;
    imageWidth = imageHeight = 45;
  }

  var svg = d3.select(document.createElement('div')).append('svg')
    .attr('viewBox', '0 0 54.4 54.4')
    .append('g')

  var circles = svg.append('circle')
    .attr('cx', '27.2')
    .attr('cy', '27.2')
    .attr('r', '21.2')
    .style('fill', '#2063C6');

  var path = svg.append('path')
    .attr('d', 'M27.2,0C12.2,0,0,12.2,0,27.2s12.2,27.2,27.2,27.2s27.2-12.2,27.2-27.2S42.2,0,27.2,0z M6,27.2 C6,15.5,15.5,6,27.2,6s21.2,9.5,21.2,21.2c0,11.7-9.5,21.2-21.2,21.2S6,38.9,6,27.2z')
    .attr('fill', '#FFFFFF');

  var text = svg.append('text')
    .attr('dx', 27)
    .attr('dy', 32)
    .attr('text-anchor', 'middle')
    .attr('style', 'font-size:' + fontSize + 'px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold')
    .text(number);

  var svgNode = svg.node().parentNode.cloneNode(true),
    image = new Image();

  d3.select(svgNode).select('clippath').remove();

  var xmlSource = (new XMLSerializer()).serializeToString(svgNode);

  image.onload = (function(imageWidth, imageHeight) {
    var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d'),
      dataURL;

    d3.select(canvas)
      .attr('width', imageWidth)
      .attr('height', imageHeight);

    context.drawImage(image, 0, 0, imageWidth, imageHeight);

    dataURL = canvas.toDataURL();
    generateIconCache[number] = dataURL;

    callback(dataURL);
  }).bind(this, imageWidth, imageHeight);

  image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function(match, p1) {
    return String.fromCharCode('0x' + p1);
  }));
}

initializeMaps();
#map_canvas {
  width: 100%;
  height: 300px;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
  
  <script src="script.js"></script>

</html>

Dans cette démo, je crée le SVG à l'aide de D3.js, puis je transforme le SVG en canevas, afin de pouvoir redimensionner l'image comme je le souhaite et après cela, j'obtiens Base64 en utilisant la méthode toDataURL du canevas.

Toute cette démo était basée sur le code de mon collègue @ thiago-mata . Bravo pour lui.

13
Estevão Lucas

La dernière API google js a google.maps.MarkerLabel objet.

Ainsi, vous pouvez facilement définir du texte/des styles pour les étiquettes

var mIcon = {
  path: google.maps.SymbolPath.CIRCLE,
  fillOpacity: 1,
  fillColor: '#fff',
  strokeOpacity: 1,
  strokeWeight: 1,
  strokeColor: '#333',
  scale: 12
};

var gMarker = new google.maps.Marker({
  map: gmap,
  position: latLng,
  title: 'Number 123',
  icon: mIcon,
  label: {color: '#000', fontSize: '12px', fontWeight: '600',
    text: '123'}
});

jsfiddle

8
Valery Viktorovsky

Je viens de trouver ce tutoriel: http://biostall.com/adding-number-or-letters-to-google-maps-api-markers

Cela ne ressemble pas à la meilleure solution, mais cela fonctionne.

6
Mauro

Vous pouvez utiliser des étiquettes sur des marqueurs, voici un tutoriel sur GIcon.label .

Vous pouvez également utiliser GMarker.openInfoWindow .

Astuce: C'est le meilleur tutoriel J'ai trouvé sur l'api google maps (bien sûr après Documentation officielle )

5
Sameh Deabes

Solution la plus simple:

marker = new google.maps.Marker({
  position: my_position,
  map: map,
  label: num_events+'' //Needs to be a string. No integers allowed
});

Voir https://developers.google.com/maps/documentation/javascript/examples/marker-labels

Pour plus de contrôle sur la disposition du marqueur, voir Réponse de Valery Viktorovsky

3
Jules Colle
<hr/>
1. add Google maps script To _Layout page.<br/>
     &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;   &lt;/script &gt;
<hr/>
2. Add script to your view page.

  &lt;script type="text/javascript" &gt;<br/>
   var mapLocation = [['Lucknow', 26.74561, 80.859375],<br/>
                    ['New Delhi', 28.613459, 77.695313],<br/>
                    ['Jaipur', 26.980829, 75.849609],<br/>
                    ['Ahmedabad', 22.674847, 72.333984],<br/>
                    ['Mumbai', 18.760713, 73.015135]];<br/>
    $(document).ready(function () { initialize(); });

// À la vue initialiser le chargement de la carte par défaut

function initialize() {<br/>
        var latLng = new google.maps.LatLng(22.917923, 76.992188);<br/>
        var myOptions = { center: latLng, zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };<br/>
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarker(map, mapLocation);
    }

function setMarker(map, mapLoc) {
    for (i = 0; i < mapLoc.length; i++) {
        var loca = mapLoc[i];
        var myLanLat = new google.maps.LatLng(loca[1], loca[2]);
        var marker = new google.maps.Marker({
            position: myLanLat,
            icon:'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ ( i     + 1) +'|FF776B|000000',
            shadow:'https://chart.googleapis.com/chart?chst=d_map_pin_shadow',
            map: map,
            tittle: loca[0],
            zIndex: loca[3]
        });
    }
}
1
Sachin CR

Le lien ci-dessus (' http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|0000 ') ne peut pas être utilisé via SSL. Pour générer et stocker les images numériques localement:

for i in {1..99}; do curl -o ./${i}_map_icon.png  "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=${i}|FE6256|000000"; echo $i; done
1
user2611053
while creating marker use the 

<script>
var marker = new google.maps.Marker({
            position: myLanLat,
            icon:'icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ (position) +'|FF776B|000000',
            map: map,
                  });
<script>
1
Selva Raj

La meilleure solution serait de passer une image et un texte distants ou locaux à un script côté serveur via une URL. Lors du traçage des marqueurs, vous utiliseriez cette URL comme valeur de l'icône et le script côté serveur retournerait une copie de votre image fournie (jamais enregistrée sur le serveur) avec le texte cuit dans l'image. Ainsi, vous pouvez afficher en temps réel des nombres ou du texte sur des images de marqueurs personnalisés lorsque vous les déposez sur la carte.

Voici le tutoriel sur mon blog sur la façon de procéder. - http://www.devinrolsen.com/google-maps-marker-icons-with-numbers-using-php-Gd/

0
Devin Olsen