Come posso creare indicatori di mappa numerati in Google Maps V3?

Question

Sto lavorando su una mappa che ha più indicatori su di essa.

Questi marcatori utilizzano un'icona personalizzata, ma vorrei anche aggiungere dei numeri in alto.Ho visto come ciò è stato ottenuto utilizzando versioni precedenti dell'API.Come posso farlo nella V3?

*Nota: l'attributo "titolo" crea un suggerimento quando passi con il mouse sul marcatore, ma voglio qualcosa che venga sovrapposto all'immagine personalizzata anche quando non ci passi sopra.

Ecco la documentazione per la classe marker e nessuno di questi attributi sembra essere d'aiuto: http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions

Answer 1

Purtroppo non è molto facile. Si potrebbe creare un contrassegno personalizzato in base alla classe OverlayView ( un esempio ) e mettere il proprio codice HTML in esso, tra cui un contatore. Questo vi lascerà con un pennarello molto semplice, che non si può trascinare in giro o aggiungere ombre facilmente, ma è molto personalizzabile.

In alternativa, si potrebbe aggiungere un'etichetta a il marcatore di default. Questo sarà meno personalizzabile, ma dovrebbe funzionare. Mantiene anche tutte le cose utili il marcatore di serie fa.

Si può leggere di più circa le sovrapposizioni in Google articolo con MVC oggetti .

Edit: se non si desidera creare una classe JavaScript, è possibile utilizzare di Google API Grafico . Ad esempio:

marcatore numerato:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

Marker Testo:

http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo

Questa è l'itinerario rapido e facile, ma è meno personalizzabile, e richiede una nuova immagine da scaricare dal cliente per ogni indicatore.

Answer 2

Questo come lo faccio in V3:

Comincio caricando l'API Google Maps e nel metodo di callback initialize() carica la MarkerWithLabel.js che ho trovato qui :

function initialize() {

            $.getScript("/js/site/marker/MarkerWithLabel.js#{applicationBean.version}", function(){

            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(currentLat, currentLng),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(document.getElementById('mapholder'),
                    mapOptions);

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

            for (var i = 0; i < mapData.length; i++) {
                createMarker(i+1, map, mapData[i]); <!-- MARKERS! -->
                extendBounds(bounds, mapData[i]);
            }
            map.fitBounds(bounds);
            var maximumZoomLevel = 16;
            var minimumZoomLevel = 11;
            var ourZoom = defaultZoomLevel; // default zoom level

            var blistener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                if (this.getZoom(map.getBounds) &gt; 16) {
                    this.setZoom(maximumZoomLevel);
                }
                google.maps.event.removeListener(blistener);
            });
            });
        }

        function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places&amp;sensor=false&amp;callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

    </script> 

Ho quindi creare le marcatori con createMarker():

function createMarker(number, currentMap, currentMapData) {

   var marker = new MarkerWithLabel({
       position: new google.maps.LatLng(currentMapData[0], currentMapData[1]),
                 map: currentMap,
                 icon: '/img/sticker/empty.png',
                 shadow: '/img/sticker/bubble_shadow.png',
                 transparent: '/img/sticker/bubble_transparent.png',
                 draggable: false,
                 raiseOnDrag: false,
                 labelContent: ""+number,
                 labelAnchor: new google.maps.Point(3, 30),
                 labelClass: "mapIconLabel", // the CSS class for the label
                 labelInBackground: false
                });
            }

Da quando ho aggiunto mapIconLabel di classe per il marcatore posso aggiungere alcune regole CSS nel mio css:

.mapIconLabel {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    font-family: 'DINNextRoundedLTProMediumRegular';
}

Ed ecco il risultato:

Answer 3

Non ho abbastanza fama di commentare le risposte ma ha voluto sottolineare che il grafico API di Google è stato sconsigliato.

API homepage :

  

La parte infografica di Google Strumenti grafico è stato ufficialmente   deprecato a partire dal 20 aprile 2012.

Answer 4

Si consiglia di scaricare un insieme di icone numerate dalle sorgenti forniti da questo sito:

• Google Marker Icons

Poi si dovrebbe essere in grado di effettuare le seguenti operazioni:

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Demo</title> 
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
    function initialize() {

      var myOptions = {
        zoom: 11,
        center: new google.maps.LatLng(-33.9, 151.2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("map"), myOptions);

      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      for (var i = 0; i < locations.length; i++) {
          var image = new google.maps.MarkerImage('marker' + i + '.png',
                      new google.maps.Size(20, 34),
                      new google.maps.Point(0, 0),
                      new google.maps.Point(10, 34));

          var location = locations[i];
          var myLatLng = new google.maps.LatLng(location[1], location[2]);
          var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              icon: image,
              title: location[0],
              zIndex: location[3]
          });
      }
    }
    </script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize();"> 
    <div id="map" style="width:400px; height:500px;"></div> 
</body> 
</html>

Cattura schermo dall'esempio precedente:

Si noti che è possibile aggiungere facilmente un ombra dietro i marcatori. Si consiglia di verificare l'esempio alla Google Maps API Reference: Complex marcatori per maggiori informazioni su questo.

Answer 5

Questa è stata ora aggiunta alla documentazione Mapping e non richiede alcun codice di terze parti.

È possibile combinare queste due campioni:

https://developers.google.com/maps/documentation/ javascript / examples / marcatore-etichette

https://developers.google.com/maps/documentation/ javascript / examples / icona-semplice

Per ottenere il codice come questo:

var labelIndex = 0;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex],
    map: map,
    icon: 'image.png'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Si noti che se si dispone di più di 35 marcatori, questo metodo non funzionerà come l'etichetta mostra solo il primo carattere (utilizzando A-Z e 0-9 fa 35). Si prega di votare per questo Google Maps Problema alla richiesta che questa restrizione essere sollevato.

Answer 6

L'ho fatto usando una soluzione simile a @ZuzEL.

Invece di utilizzare la soluzione predefinita (http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000), puoi creare queste immagini come desideri, utilizzando JavaScript, senza alcun codice lato server.

Google google.maps.Marker accetta Base64 per la sua proprietà icona.Con questo possiamo creare un Base64 valido da un SVG.

Puoi vedere il codice per produrre lo stesso di questa immagine in questo 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>

In questa demo creo SVG utilizzando D3.js, quindi trasformo SVG in Canvas, così posso ridimensionare l'immagine come desidero e successivamente ottengo Base64 dal metodo toDataURL di canvas.

Tutta questa demo era basata sul mio compagno @thiago-mata codice.Complimenti per lui.

Answer 7

Che ne dici di questo? (2015)

1) Ottenere immagine un indicatore personalizzato.

var imageObj = new Image();
    imageObj.src = "/markers/blank_pin.png"; 

2) Creare un canvas in RAM e disegnare questa immagine su di esso

imageObj.onload = function(){
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    context.drawImage(imageObj, 0, 0);
}

3) qualsiasi cosa sopra di esso

context.font = "40px Arial";
context.fillText("54", 17, 55);

4) Ottenere dati grezzi in tela e di fornire a Google API, invece di URL

var image = {
    url: canvas.toDataURL(),
 };
 new google.maps.Marker({
    position: position,
    map: map,
    icon: image
 });

codice completo:

function addComplexMarker(map, position, label, callback){
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = "/markers/blank_pin.png";
    imageObj.onload = function(){
        context.drawImage(imageObj, 0, 0);

        //Adjustable parameters
        context.font = "40px Arial";
        context.fillText(label, 17, 55);
        //End

        var image = {
            url: canvas.toDataURL(),
            size: new google.maps.Size(80, 104),
            origin: new google.maps.Point(0,0),
            anchor: new google.maps.Point(40, 104)
        };
        // the clickable region of the icon.
        var shape = {
            coords: [1, 1, 1, 104, 80, 104, 80 , 1],
            type: 'poly'
        };
        var marker = new google.maps.Marker({
            position: position,
            map: map,
            labelAnchor: new google.maps.Point(3, 30),
            icon: image,
            shape: shape,
            zIndex: 9999
        });
        callback && callback(marker)
    };
});

Answer 8

Google Maps versione 3 è dotato di supporto per etichette marcatori. Non c'è bisogno di generare le proprie immagini più o implementare le classi 3a parte. Marker Etichette

Answer 9

E 'abbastanza fattibile di generare icone etichettate lato server, se si dispone di alcune competenze di programmazione. Avrete bisogno la libreria GD sul server, oltre a PHP. Lavorato bene per me da diversi anni, ma certamente difficile da ottenere le immagini delle icone in sincronia.

Lo faccio tramite la tecnologia AJAX inviando i pochi parametri per definire l'icona vuota e il testo e il colore così come bgcolor da applicare. Ecco il mio PHP:

header("Content-type: image/png");
//$img_url = "./icons/gen_icon5.php?blank=7&text=BB";

function do_icon ($icon, $text, $color) {
$im = imagecreatefrompng($icon);
imageAlphaBlending($im, true);
imageSaveAlpha($im, true);

$len = strlen($text);
$p1 = ($len <= 2)? 1:2 ;
$p2 = ($len <= 2)? 3:2 ;
$px = (imagesx($im) - 7 * $len) / 2 + $p1;
$font = 'arial.ttf';
$contrast = ($color)? imagecolorallocate($im, 255, 255, 255): imagecolorallocate($im, 0, 0, 0); // white on dark?

imagestring($im, $p2, $px, 3, $text, $contrast);    // imagestring  ( $image, $font, $x, $y, $string, $color)

imagepng($im);
imagedestroy($im);
}
$icons =   array("black.png", "blue.png", "green.png", "red.png", "white.png", "yellow.png", "gray.png", "lt_blue.png", "orange.png");      // 1/9/09
$light =   array( TRUE,         TRUE,       FALSE,       FALSE,     FALSE,      FALSE,      FALSE,          FALSE,      FALSE);     // white text?

$the_icon = $icons[$_GET['blank']];             // 0 thru 8 (note: total 9)
$the_text = substr($_GET['text'], 0, 3);        // enforce 2-char limit
do_icon ($the_icon, $the_text,$light[$_GET['blank']] ); 

E 'invocato sul lato client tramite qualcosa di simile al seguente:     var file_immagine = "./our_icons/gen_icon.php?blank=" + fuggire (le icone [color]) + "& text =" + iconStr;

Answer 10

I miei due centesimi che mostrano come utilizzare il Google Charts API per risolvere questo problema.

Answer 11

In base a @ dave1010 risposta, ma con collegamenti https aggiornati.

marcatore numerato:

https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

Marker Testo:

https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker

Answer 12

È possibile utilizzare Marcatore Con l'opzione Label in google-maps-utility-libreria-v3.

https://code.google .com / p / google-maps-utility-biblioteca-v3 / wiki / biblioteche

Answer 13

ho scoperto il modo migliore per farlo. Utilizzare Snap.svg per creare lo SVG e quindi utilizzare la funzione toDataURL () che crea i dati grafici da includere come icona. Si noti che uso la classe SlidingMarker per il marcatore che mi dà bel movimento del marcatore. Con Snap.svg è possibile creare qualsiasi tipo di grafica e la vostra mappa sarà fantastico.

var s = Snap(100, 100);
s.text(50, 50, store.name);
// Use more graphics here.
var marker = new SlidingMarker({
  position: {lat: store.lat, lng: store.lng},
  map: $scope.map,
  label: store.name, // you do not need this
  title: store.name, // nor this
  duration: 2000,
  icon: s.toDataURL()
});

Answer 14

soluzione più facile - USO SVG

funziona in: in IE9 , IE10 , FF, Chrome, Safari

(se si utilizza altri browser per favore "codice Run frammento di" e inserire un commento)

Non ci sono dipendenze esterne oltre a Google Maps API!

Questa è tutto facile a condizione che avete la vostra icona nella Svg Formato. Se questo è il caso proprio Aggiungi adeguato elemento di testo e modificare il suo contenuto a vostro piacimento con JS.

Aggiungi qualcosa di simile al codice .svg (questo è il testo "sezione", che sarà poi cambiato con JS):

<text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">1</text>

Esempio: (parzialmente copiato da @ EstevãoLucas)

Importante: USO CORRETTO proprietà del tag <text>. Nota text-anchor="middle" x="50%" y="28" cui centro numeri più lunghi (maggiori informazioni: Come luogo e centro di testo in un rettangolo di SVG )

Usa encodeURIComponent() (questo probabilmente assicura la compatibilità con IE9 e 10)

// Most important part (use output as Google Maps icon)
function getMarkerIcon(number) {
  // inline your SVG image with number variable
  var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"> <defs> <rect id="path-1" width="40" height="40"/> <mask id="mask-2" width="40" height="40" x="0" y="0" fill="white"> <use xlink:href="#path-1"/> </mask> </defs> <g id="Page-1" fill="none" fill-rule="evenodd"> <g id="Phone-Portrait---320" transform="translate(-209 -51)"> <g id="Group" transform="translate(209 51)"> <use id="Rectangle" fill="#FFEB3B" stroke="#F44336" stroke-width="4" mask="url(#mask-2)" xlink:href="#path-1"/> <text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">' + number + '</text> </g> </g> </g> </svg>';
  // use SVG without base64 see: https://css-tricks.com/probably-dont-base64-svg/
  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}

// Standard Maps API code
var markers = [
  [1, -14.2350040, -51.9252800],
  [2, -34.028249, 151.157507],
  [3, 39.0119020, -98.4842460],
  [5, 48.8566140, 2.3522220],
  [9, 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) {
      var pos = new google.maps.LatLng(point[1], point[2]);

      new google.maps.Marker({
        position: pos,
        map: map,
        icon: getMarkerIcon(point[0]),         
      });

      bounds.extend(pos);
  });

  map.fitBounds(bounds);
}

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>        
  </head>

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

</html>

Maggiori informazioni su SVG inline in Google Maps: https: //robert.katzki.de/posts/inline-svg-as-google-maps-marker

Answer 15

Forse ci sono quelli ancora alla ricerca di questo, ma trovare le icone di Google dinamici deprecati e altre librerie mappa-icona solo un po 'troppo brutto.

Per aggiungere un marcatore semplice con un numero qualsiasi all'interno utilizzando un URL. In Google Drive utilizzando le mie mappe di Google, crea le icone numerato quando si utilizza un layer che è impostato a 'sequenza di numeri' e quindi l'aggiunta di marcatori / punti sulla mappa.

Guardando il codice sorgente, Google ha il proprio modo di farlo attraverso un'URL:

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1738-blank-sequence_4x.png&highlight=ff000000,0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=56&font=fonts/Roboto-Medium.ttf

Sopra URL

Non ho giocato molto con esso, ma cambiando i codici colore esadecimale nel parametro 'pezzo forte' (parametro colore non cambia il colore come si potrebbe pensare), il valore di 'testo' può essere impostata su qualsiasi stringa e si può fare una bella icona rotonda con qualsiasi numero / valore all'interno. Sono sicuro che gli altri parametri possono essere di uso troppo.

Un avvertimento con questo approccio, chissà quando Google rimuoverà questo URL dal mondo!

Answer 16

Ecco le icone personalizzate con lo stile aggiornato di "aggiornamento visivo" che puoi generare rapidamente tramite un semplice script .vbs.Ho incluso anche un ampio set pregenerato che puoi utilizzare immediatamente con più opzioni di colore: https://github.com/Concept211/Google-Maps-Markers

Utilizza il seguente formato quando ti colleghi ai file di immagine ospitati su GitHub:

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

colore
rosso, nero, blu, verde, grigio, arancione, viola, bianco, giallo

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

Esempi:

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