javascript - name - google.maps.marker example

Google maps: ¿número de lugar en marcador?

Question

¿Cómo puedo mostrar un número en el marcador en un mapa de Google? Quiero hacer un clúster del lado del servidor y necesito mostrar cuántos puntos representa el clúster.

Answer 1

Acabo de encontrar este tutorial: http://biostall.com/adding-number-or-letters-to-google-maps-api-markers

No parece la mejor solución, pero funciona.

Answer 2

Aquí hay iconos personalizados con el estilo actualizado de "actualización visual" que puede generar rápidamente a través de una simple secuencia de comandos .vbs. También incluí un gran conjunto pregenerado que puedes usar inmediatamente con múltiples opciones de color: https://github.com/Concept211/Google-Maps-Markers

Utilice el siguiente formato al vincular a los archivos de imagen alojados en GitHub:

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

color

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

personaje

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

Ejemplos:

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

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

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

Answer 3

El enlace de arriba ('' http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000 '') no se puede usar a través de SSL. Para generar y almacenar el número de imágenes localmente:

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

Answer 4

En lugar de utilizar la solución predeterminada ( http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000 ), puede crear estas imágenes como desee, utilizando JavaScript sin ningún código del lado del servidor.

Google google.maps.Marker acepta Base64 por su propiedad de icono. Con esto podemos crear un Base64 válido a partir de un SVG.

Puede ver el código para producir lo mismo que esta imagen en este 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>

En esta demostración, creo el SVG usando D3.js, luego transformé SVG en Canvas, así que puedo cambiar el tamaño de la imagen como quiera y luego obtengo Base64 usando el método canvas ''toDataURL.

Toda esta demostración se basó en el código de mi compañero @ thiago-mata . Felicitaciones por él.

Answer 5

La última API de google js tiene el objeto google.maps.MarkerLabel .

Para que pueda configurar texto / estilos fácilmente para las etiquetas

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

Answer 6

La mejor solución sería pasar una imagen o texto local o remoto a un script del lado del servidor a través de una url. Al trazar los marcadores, usaría esta URL como el valor del icono, y la secuencia de comandos del servidor devolverá una copia de la imagen suministrada (nunca guardada en el servidor) con el texto grabado en la imagen. Por lo tanto, puede representar números o texto en imágenes de marcador personalizadas en tiempo real a medida que las suelta en el mapa.

Aquí está el tutorial en mi blog sobre cómo hacer esto. - http://www.devinrolsen.com/google-maps-marker-icons-with-numbers-using-php-gd/

Answer 7

La solución más simple:

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

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

Para un mayor control sobre el diseño del marcador, ver la respuesta de Valery Viktorovsky

Answer 8

Puede usar etiquetas sobre marcadores, aquí hay un tutorial sobre GIcon.label .

También puede usar GMarker.openInfoWindow .

Consejo: este es el mejor tutorial que encontré sobre la API de Google Maps (por supuesto, después de la documentación oficial )

Answer 9

<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(); });

// En vista inicializar carga mapa predeterminado

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]
        });
    }
}

Answer 10

icon: ''http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|FE6256|000000''

Se ve bien con números de 1 y 2 dígitos

(del enlace de Mauro)

Answer 11

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>