Comment puis-je créer des marqueurs de carte numérotés dans Google Maps V3 ?

Question

Je travaille sur une carte qui comporte plusieurs marqueurs.

Ces marqueurs utilisent une icône personnalisée, mais j'aimerais aussi ajouter des chiffres par-dessus. J'ai vu comment cela a été réalisé à l'aide d'anciennes versions de l'API. Comment puis-je le faire dans la V3 ?

*Remarque : l'attribut " title " crée une infobulle lorsque vous passez la souris sur le marqueur, mais je veux que quelque chose soit superposé à l'image personnalisée même lorsque vous ne passez pas la souris dessus.

Voici la documentation relative à la classe de marqueur, et aucun de ces attributs ne semble aider : http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions

Answer 1

Malheureusement, ce n'est pas très facile. Vous pourriez créer votre propre marqueur personnalisé basé sur la classe OverlayView ( un exemple ) et y mettre votre propre HTML, y compris un compteur. Vous obtiendrez ainsi un marqueur très basique, que vous ne pouvez pas déplacer ni ombrer facilement, mais qui est très personnalisable.

Vous pouvez également ajouter une étiquette au marqueur par défaut . Cela sera moins personnalisable mais devrait fonctionner. Il conserve également toutes les fonctions utiles du marqueur standard.

Vous pouvez en savoir plus sur les superpositions dans l'article de Google. S'amuser avec les objets MVC .

Edit : si vous ne voulez pas créer une classe JavaScript, vous pouvez utiliser L'API graphique de Google . Par exemple :

Marqueur numéroté :

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

Marqueur de texte :

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

C'est la solution la plus rapide et la plus facile, mais elle est moins personnalisable et nécessite le téléchargement d'une nouvelle image par le client pour chaque marqueur.

Answer 2

C'est comme ça que je fais dans V3 :

Je commence par charger l'api de google maps et dans la méthode de callback initialize() Je charge MarkerWithLabel.js que j'ai trouvé ici :

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> 

Je crée ensuite les marqueurs avec 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
                });
            }

Depuis que j'ai ajouté mapIconLabel au marqueur, je peux ajouter quelques règles css dans mon css :

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

Et voici le résultat :

Answer 3

Je n'ai pas assez de réputation pour commenter les réponses, mais je voulais signaler que l'API Google Chart a été dépréciée.

De la Page d'accueil de l'API :

La partie Infographies de Google Chart Tools a été officiellement dépréciée depuis le 20 avril 2012.

Answer 4

Vous pouvez télécharger un ensemble d'icônes numérotées à partir des sources fournies sur ce site :

• Icônes de marqueurs Google

Vous devriez alors être en mesure de faire ce qui suit :

<!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>

Capture d'écran de l'exemple ci-dessus :

Notez que vous pouvez facilement ajouter une ombre derrière les marqueurs. Vous pouvez consulter l'exemple à la page Référence API Google Maps : Marqueurs complexes pour plus d'informations à ce sujet.

Answer 5

Il est tout à fait possible de générer des icônes étiquetées côté serveur, si vous avez quelques compétences en programmation. Vous aurez besoin de la bibliothèque GD sur le serveur, en plus de PHP. Cela fonctionne bien pour moi depuis plusieurs années, mais il est vrai qu'il est difficile de synchroniser les images des icônes.

Je fais cela via AJAX en envoyant les quelques paramètres pour définir l'icône vide et le texte et la couleur ainsi que le bgcolor à appliquer. Voici mon 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']] ); 

Il est invoqué côté client via quelque chose comme ce qui suit : var image_file = "./nos_icons/gen_icon.php?blank=" + escape(icons[color]) + "&text=" + iconStr ;