657

Assez nouveau pour Google Maps Api. J'ai un tableau de données que je veux parcourir et tracer sur une carte. Cela semble assez simple, mais tous les tutoriels multi-marqueurs que j'ai trouvés sont assez complexes.

Utilisons le tableau de données du site de google pour un exemple:

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

Je veux simplement tracer tous ces points et faire apparaître une fenêtre infoWindow lorsque vous cliquez dessus pour afficher le nom.

javascript google-maps google-maps-api-3 wesbos
la source

1128

C'est le plus simple que j'ai pu le réduire à:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    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]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

👨‍💻 Éditer / bifurquer sur un Codepen →

CAPTURE D'ÉCRAN

Marqueurs multiples de Google Maps

Une magie de fermeture se produit lors du passage de l'argument de rappel à la addListenerméthode. Cela peut être un sujet assez délicat si vous ne savez pas comment fonctionnent les fermetures. Je suggère de consulter l'article Mozilla suivant pour une brève introduction si c'est le cas:

❯ Mozilla Dev Center: Utilisation des fermetures

Daniel Vassallo
la source

4

@RaphaelDDL: Oui, ces parenthèses sont nécessaires pour réellement invoquer la fonction sans nom. Les arguments doivent être transmis en raison du fonctionnement de JavaScript (en raison des fermetures). Voir ma réponse à cette question pour un exemple et plus d'informations: stackoverflow.com/a/2670420/222908

Daniel Vassallo

Bonne réponse, mais elle pourrait être encore simplifiée. Étant donné que tous les marqueurs auront des InfoWindows individuels et que JavaScript ne se soucie pas si vous ajoutez des propriétés supplémentaires à un objet, tout ce que vous avez à faire est d'ajouter un InfoWindowaux propriétés du marqueur, puis d'appeler le .open()sur l'InfoWindow depuis lui-même. J'aurais posté le changement ici, mais les modifications étaient suffisamment importantes pour que j'envoie ma propre réponse .

Matthew Cordaro

Pourquoi ne pas l'utiliser new MarkerClusterer()pour un buste de performance massif? Consultez la réponse de ChirsSwires.

DevWL

salut @ Daniel Vassallo, moi aussi j'ai la même exigence d'afficher plusieurs marqueurs dans mon projet angulaire ionique. veuillez m'aider, j'ai déjà posé une question sur stackoverflow. voici le lien de la question: stackoverflow.com/questions/57985967/…

Saif

Ça marche. Merci. Comment allez-vous supprimer les marqueurs de google map, car vous utilisez une seule instance de marqueur et initialisez en boucle. Veuillez partager vos pensées.

Kamlesh

59

Voici un autre exemple de plusieurs marqueurs de chargement avec un cadre unique titleet infoWindowtexte. Testé avec la dernière API google maps V3.11.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Multiple Markers Google Maps</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                // map options
                var options = {
                    zoom: 5,
                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    mapTypeControl: false
                };

                // init map
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);

                // NY and CA sample Lat / Lng
                var southWest = new google.maps.LatLng(40.744656, -74.005966);
                var northEast = new google.maps.LatLng(34.052234, -118.243685);
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();

                // set multiple marker
                for (var i = 0; i < 250; i++) {
                    // init markers
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                        map: map,
                        title: 'Click Me ' + i
                    });

                    // process multiple info windows
                    (function(marker, i) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: 'Hello, World!!'
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, i);
                }
            })();
        });
        </script>
    </head>
    <body>
        <div id="map_canvas" style="width: 800px; height:500px;"></div>
    </body>
</html>

Capture d'écran de 250 marqueurs:

API Google Maps V3.11 avec plusieurs marqueurs

Il randomisera automatiquement le Lat / Lng pour le rendre unique. Cet exemple sera très utile si vous souhaitez tester 500, 1000, xxx marqueurs et performances.

Madan Sapkota
la source

1

Soyez prudent lorsque vous publiez des réponses copier-coller passe-partout / verbatim à plusieurs questions, celles-ci ont tendance à être signalées comme "spam" par la communauté. Si vous faites cela, cela signifie généralement que les questions sont en double, signalez-les plutôt comme telles.

Kev

1

Cela affichera de nombreux pop-up infoWindowpour chaque marqueur et ne masquera pas l'autre infoWindows'il est actuellement affiché. c'est vraiment utile :)

Kannika

@Anup, si vous venez de lire la question et de commenter, ce serait mieux. la question est de demander "exemple de marqueur multiple" s'il est aléatoire ou votre propre bla bla.

Madan Sapkota

Encore une fois, pourquoi ne pas l'utiliser new MarkerClusterer()pour une baisse massive des performances? Consultez la réponse de ChirsSwires.

DevWL

1

@DevWL, il a été répondu en 2013. Vous êtes libre de mettre à jour.

Madan Sapkota

39

Je pensais que je mettrais cela ici car il semble être un point d'atterrissage populaire pour ceux qui commencent à utiliser les API Google Maps. Plusieurs marqueurs rendus du côté client sont probablement la chute de nombreuses applications de cartographie en termes de performances. Il est difficile de comparer, de corriger et, dans certains cas, même d'établir qu'il y a un problème (en raison des différences d'implémentation du navigateur, du matériel disponible pour le client, des appareils mobiles, la liste est longue).

La façon la plus simple de commencer à résoudre ce problème consiste à utiliser une solution de regroupement de marqueurs. L'idée de base est de regrouper des emplacements géographiquement similaires dans un groupe avec le nombre de points affichés. Lorsque l'utilisateur fait un zoom sur la carte, ces groupes s'agrandissent pour révéler des marqueurs individuels en dessous.

Le plus simple à implémenter est peut- être la bibliothèque markerclusterer . Une implémentation de base serait la suivante (après les importations de bibliothèque):

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Les marqueurs au lieu d'être ajoutés directement à la carte sont ajoutés à un tableau. Ce tableau est ensuite transmis à la bibliothèque qui gère les calculs complexes pour vous et attaché à la carte.

Non seulement ces implémentations augmentent considérablement les performances côté client, mais elles conduisent également dans de nombreux cas à une interface utilisateur plus simple et moins encombrée et à une digestion plus facile des données à plus grande échelle.

Autres implémentations sont disponibles auprès de Google.

J'espère que cela aide certains de ceux qui sont plus récents aux nuances de la cartographie.

ChrisSwires
la source

2

Merci, une grande grande aide! Il y a une différence d'ordre ou d'amplitude dans les performances, en créant d'abord les points de données google.map, puis en les transmettant à la bibliothèque de cartographie, dans ce cas MarketCluster à tracer. avec environ 150 000 points de données, le premier message de «Daniel Vassallo» a pris environ 2 minutes à charger, ces 5 secondes. Merci beaucoup 'Swires'!

Waqas

1

Je pensais que ce serait un bon endroit pour cela, j'imagine que la plupart des gens atterrissent d'abord sur la pile lorsqu'ils sont liés à Google maps est cette page, et il y a ensuite `` pourquoi ma carte prend-elle autant de temps à charger ''.

ChrisSwires

@Monic, quel que soit votre ensemble de données, ce n'est qu'une variable d'espace réservé.

ChrisSwires

20

Version asynchrone:

<script type="text/javascript">
  function initialize() {
    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]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}

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

window.onload = loadScript;
  </script>

sHaDeoNeR
la source

15

Ceci est l'exemple de carte de travail

var arr = new Array();
    function initialize() { 
        var i;  
        var Locations = [
                {
                  lat:48.856614, 
                  lon:2.3522219000000177, 
                  address:'Paris',
                  gval:'25.5',
                  aType:'Non-Commodity',
                  title:'Paris',
                  descr:'Paris'           
                },        
                    {
                  lat: 55.7512419, 
                  lon: 37.6184217,
                  address:'Moscow',
                  gval:'11.5',
                  aType:'Non-Commodity',
                  title:'Moscow',
                  descr:'Moscow Airport'              
                },     

                {
              lat:-9.481553000000002, 
              lon:147.190242, 
              address:'Port Moresby',
              gval:'1',
              aType:'Oil',
              title:'Papua New Guinea',
              descr:'Papua New Guinea 123123123'              
            },
            {
           lat:20.5200,
           lon:77.7500,
           address:'Indore',
            gval:'1',
            aType:'Oil',
            title:'Indore, India',
            descr:'Airport India'
        }
    ];

    var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(51.9000,8.4731),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    var infowindow =  new google.maps.InfoWindow({
        content: ''
    });

    for (i = 0; i < Locations.length; i++) {
            size=15;        
            var img=new google.maps.MarkerImage('marker.png',           
                new google.maps.Size(size, size),
                new google.maps.Point(0,0),
                new google.maps.Point(size/2, size/2)
           );

        var marker = new google.maps.Marker({
            map: map,
            title: Locations[i].title,
            position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),           
                icon: img
        });

        bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].descr + "</p>",Locations[i].title);  

    }

}

function bindInfoWindow(marker, map, infowindow, html, Ltitle) { 
    google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow.setContent(html); 
            infowindow.open(map, marker); 

    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();

    }); 
}

Exemple de travail complet. Vous pouvez simplement copier, coller et utiliser.

Anup
la source

12

À partir d' exemples d'API Google Map :

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['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]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

la source

8

cette réponse ne comprend pas la partie

infoWindow

@omat Étrangement, les propres documents de Google ne suggèrent pas qu'il doit y avoir une partie infoWindow. Mais ça ne marche pas non plus pour moi :(

Emil Ahlbäck

11

Voici une autre version que j'ai écrite pour enregistrer les biens immobiliers de la carte, qui place le pointeur de la sous-fenêtre sur le lat et le long réels du marqueur, tout en masquant temporairement le marqueur pendant l'affichage de la sous-fenêtre.

Il supprime également l'affectation standard des «marqueurs» et accélère le traitement en affectant directement le nouveau marqueur au tableau des marqueurs lors de la création des marqueurs. Notez cependant que des propriétés supplémentaires ont été ajoutées à la fois au marqueur et à la sous-fenêtre, donc cette approche est un peu non conventionnelle ... mais c'est moi!

Il n'est jamais mentionné dans ces questions de la sous-fenêtre que la sous-fenêtre standard N'EST PAS placée aux lat et lng du point marqueur, mais plutôt en haut de l'image du marqueur. La visibilité du marqueur doit être masquée pour que cela fonctionne, sinon l'API Maps repoussera l'ancre de la sous-fenêtre vers le haut de l'image du marqueur.

Les références aux marqueurs dans le tableau des `` marqueurs '' sont créées immédiatement lors de la déclaration des marqueurs pour toutes les tâches de traitement supplémentaires qui peuvent être souhaitées ultérieurement (masquage / affichage, saisie des cordons, etc.). Cela évite l'étape supplémentaire d'assigner l'objet marqueur à «marqueur», puis de pousser le «marqueur» dans le tableau des marqueurs ... beaucoup de traitement inutile dans mon livre.

Quoi qu'il en soit, une vision différente des sous-fenêtres, et j'espère que cela vous aidera à vous informer et à vous inspirer.

    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]
    ];
    var map;
    var markers = [];

    function init(){
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var num_markers = locations.length;
      for (var i = 0; i < num_markers; i++) {  
        markers[i] = new google.maps.Marker({
          position: {lat:locations[i][1], lng:locations[i][2]},
          map: map,
          html: locations[i][0],
          id: i,
        });

        google.maps.event.addListener(markers[i], 'click', function(){
          var infowindow = new google.maps.InfoWindow({
            id: this.id,
            content:this.html,
            position:this.getPosition()
          });
          google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
            markers[this.id].setVisible(true);
          });
          this.setVisible(false);
          infowindow.open(map);
        });
      }
    }

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

Voici un JSFiddle fonctionnel

Remarque supplémentaire
Vous remarquerez dans cet exemple de données Google donné une quatrième place dans le tableau des «emplacements» avec un numéro. Compte tenu de cela dans l'exemple, vous pouvez également utiliser cette valeur pour l'ID de marqueur à la place de la valeur de boucle actuelle, de sorte que ...

var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {  
  markers[i] = new google.maps.Marker({
    position: {lat:locations[i][1], lng:locations[i][2]},
    map: map,
    html: locations[i][0],
    id: locations[i][3],
  });
};

Épiphanie
la source

10

Réponse acceptée, réécrite dans ES6:

$(document).ready(() => {
  const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');

  // Display a map on the page
  const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });

  const buildings = [
    {
      title: 'London Eye, London', 
      coordinates: [51.503454, -0.119562],
      info: 'carousel'
    },
    {
      title: 'Palace of Westminster, London', 
      coordinates: [51.499633, -0.124755],
      info: 'palace'
    }
  ];

  placeBuildingsOnMap(buildings, map);
});


const placeBuildingsOnMap = (buildings, map) => {
  // Loop through our array of buildings & place each one on the map  
  const bounds = new google.maps.LatLngBounds();
  buildings.forEach((building) => {
    const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
    // Stretch our bounds to the newly found marker position
    bounds.extend(position);

    const marker = new google.maps.Marker({
      position: position,
      map: map,
      title: building.title
    });

    const infoWindow = new google.maps.InfoWindow();
    // Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.setContent(building.info);
      infoWindow.open(map, marker);
    })

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  })
})

Lakesare
la source

6

Lien source

Lien de démonstration

Code HTML complet

Afficher InfoWindow sur Click ou Hover.
Une seule InfoWindow sera affichée

    <!DOCTYPE html>
    <html>

    <head>
        <style>
            /*  <span class="metadata-marker" style="display: none;" data-region_tag="css"></span>       Set the size of the div element that contains the map */
            #map {
                height: 400px;
                /* The height is 400 pixels */
                width: 100%;
                /* The width is the width of the web page */
            }
        </style>
        <script>
            var map;
            var InforObj = [];
            var centerCords = {
                lat: -25.344,
                lng: 131.036
            };
            var markersOnMap = [{
                    placeName: "Australia (Uluru)",
                    LatLng: [{
                        lat: -25.344,
                        lng: 131.036
                    }]
                },
                {
                    placeName: "Australia (Melbourne)",
                    LatLng: [{
                        lat: -37.852086,
                        lng: 504.985963
                    }]
                },
                {
                    placeName: "Australia (Canberra)",
                    LatLng: [{
                        lat: -35.299085,
                        lng: 509.109615
                    }]
                },
                {
                    placeName: "Australia (Gold Coast)",
                    LatLng: [{
                        lat: -28.013044,
                        lng: 513.425586
                    }]
                },
                {
                    placeName: "Australia (Perth)",
                    LatLng: [{
                        lat: -31.951994,
                        lng: 475.858081
                    }]
                }
            ];

            window.onload = function () {
                initMap();
            };

            function addMarkerInfo() {
                for (var i = 0; i < markersOnMap.length; i++) {
                    var contentString = '<div id="content"><h1>' + markersOnMap[i].placeName +
                        '</h1><p>Lorem ipsum dolor sit amet, vix mutat posse suscipit id, vel ea tantas omittam detraxit.</p></div>';

                    const marker = new google.maps.Marker({
                        position: markersOnMap[i].LatLng[0],
                        map: map
                    });

                    const infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        maxWidth: 200
                    });

                    marker.addListener('click', function () {
                        closeOtherInfo();
                        infowindow.open(marker.get('map'), marker);
                        InforObj[0] = infowindow;
                    });
                    // marker.addListener('mouseover', function () {
                    //     closeOtherInfo();
                    //     infowindow.open(marker.get('map'), marker);
                    //     InforObj[0] = infowindow;
                    // });
                    // marker.addListener('mouseout', function () {
                    //     closeOtherInfo();
                    //     infowindow.close();
                    //     InforObj[0] = infowindow;
                    // });
                }
            }

            function closeOtherInfo() {
                if (InforObj.length > 0) {
                    /* detach the info-window from the marker ... undocumented in the API docs */
                    InforObj[0].set("marker", null);
                    /* and close it */
                    InforObj[0].close();
                    /* blank the array */
                    InforObj.length = 0;
                }
            }

            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: centerCords
                });
                addMarkerInfo();
            }
        </script>
    </head>

    <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>

        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

    </body>

    </html>

Code Spy
la source

1

Merci pour le closeOtherInfo, je n'ai pas trouvé de solution décente pour travailler avec merkercluster jusqu'à votre réponse. :)

chris loughnane

1

Voilà ce que je cherchais. Merci l'homme travaille très bien en 2020

Faizan Anwer Ali Rupani

5

Ajouter un marqueur dans votre programme est très simple. Vous pouvez juste ajouter ce code:

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});

Les champs suivants sont particulièrement importants et généralement définis lorsque vous créez un marqueur:

position(obligatoire) spécifie un LatLng identifiant l'emplacement initial du marqueur. Une façon de récupérer un LatLng est d'utiliser le service de géocodage .
map(facultatif) spécifie la carte sur laquelle placer le marqueur. Si vous ne spécifiez pas de carte lors de la construction du marqueur, le marqueur est créé mais n'est pas attaché (ou affiché) à la carte. Vous pouvez ajouter le marqueur plus tard en appelant la setMap()méthode du marqueur .

Notez , dans l'exemple, que le champ titre définit le titre du marqueur qui apparaîtra sous forme d'infobulle.

Vous pouvez consulter la documentation de l'API Google ici .

Ceci est un exemple complet pour placer un marqueur dans une carte. Attention, vous devez remplacer YOUR_API_KEYpar votre clé API Google :

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <title>Simple markers</title>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
 <div id="map"></div>
<script>

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

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

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Maintenant, si vous voulez tracer des marqueurs d'un tableau dans une carte, vous devriez faire comme ceci:

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

function initMap() {
  var myLatLng = {lat: -33.90, lng: 151.16};

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

  var count;

  for (count = 0; count < locations.length; count++) {  
    new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
      });
   }
}

Cet exemple me donne le résultat suivant:

Vous pouvez également ajouter une fenêtre d'informations dans votre épingle. Vous avez juste besoin de ce code:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[count][1], locations[count][2]),
    map: map
    });

marker.info = new google.maps.InfoWindow({
    content: 'Hello World!'
    });

Vous pouvez avoir la documentation de Google sur infoWindows ici .

Maintenant, nous pouvons ouvrir l'infoWindow lorsque le marqueur est "clik" comme ceci:

var marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[count][1], locations[count][2]),
     map: map
     });

marker.info = new google.maps.InfoWindow({
     content: locations [count][0]
     });


google.maps.event.addListener(marker, 'click', function() {  
    // this = marker
    var marker_map = this.getMap();
    this.info.open(marker_map, this);
    // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
            });

Remarque , vous pouvez avoir une documentation à Listener ce sujet dans le développeur Google.

Et, enfin, nous pouvons tracer une infoWindow dans un marqueur si l'utilisateur clique dessus. Voici mon code complet:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
        height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

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


    // When the user clicks the marker, an info window opens.

    function initMap() {
        var myLatLng = {lat: -33.90, lng: 151.16};

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

        var count=0;


        for (count = 0; count < locations.length; count++) {  

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                map: map
                });

            marker.info = new google.maps.InfoWindow({
                content: locations [count][0]
                });


            google.maps.event.addListener(marker, 'click', function() {  
                // this = marker
                var marker_map = this.getMap();
                this.info.open(marker_map, this);
                // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
                });
        }
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

Normalement, vous devriez avoir ce résultat:

SphynxTech
la source

4

À la suite de la réponse de Daniel Vassallo , voici une version qui traite de la question de la fermeture de manière plus simple.

Étant donné que tous les marqueurs auront une InfoWindow individuelle et que JavaScript ne se soucie pas si vous ajoutez des propriétés supplémentaires à un objet, tout ce que vous devez faire est d'ajouter une InfoWindow aux propriétés du marqueur et d'appeler ensuite .open()sur l' InfoWindow depuis lui-même!

Modifier: avec suffisamment de données, la charge de page pourrait prendre beaucoup de temps, donc plutôt que de construire l' InfoWindow avec le marqueur, la construction ne devrait se produire qu'en cas de besoin. Notez que toutes les données utilisées pour construire l' InfoWindow doivent être ajoutées au marqueur en tant que propriété ( data). Notez également qu'après le premier événement de clic, infoWindowpersistera en tant que propriété de son marqueur, de sorte que le navigateur n'a pas besoin de se reconstruire constamment.

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

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-33.92, 151.25)
});

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    data: {
      name: locations[i][0]
    }
  });
  marker.addListener('click', function() {
    if(!this.infoWindow) {
      this.infoWindow = new google.maps.InfoWindow({
        content: this.data.name;
      });
    }
    this.infoWindow.open(map,this);
  })
}

Matthew Cordaro
la source

2

Voici un exemple de fonction javascript presque complet qui permettra plusieurs marqueurs définis dans un JSONObject.

Il n'affichera que les marqueurs qui se trouvent dans les limites de la carte.

Ceci est important pour que vous ne fassiez pas de travail supplémentaire.

Vous pouvez également définir une limite pour les marqueurs afin de ne pas afficher une quantité extrême de marqueurs (s'il y a une possibilité d'une chose dans votre utilisation);

il n'affichera pas non plus de marqueurs si le centre de la carte n'a pas changé de plus de 500 mètres.
Ceci est important car si un utilisateur clique sur le marqueur et fait glisser accidentellement la carte en le faisant, vous ne voulez pas que la carte recharge les marqueurs.

J'ai attaché cette fonction à l'écouteur d'événements inactifs pour la carte afin que les marqueurs s'affichent uniquement lorsque la carte est inactive et réafficheront les marqueurs après un événement différent.

Dans la capture d'écran d'action, il y a un petit changement dans la capture d'écran montrant plus de contenu dans la sous-fenêtre. collé sur pastbin.com

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>

Développer l'extrait

Thunderstick
la source

0

Voici un exemple de plusieurs marqueurs dans Reactjs .

Ci-dessous le composant de carte

import React from 'react';
import PropTypes from 'prop-types';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';

const MapContainer = (props) => {
  const [mapConfigurations, setMapConfigurations] = useState({
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {}
  });

  var points = [
    { lat: 42.02, lng: -77.01 },
    { lat: 42.03, lng: -77.02 },
    { lat: 41.03, lng: -77.04 },
    { lat: 42.05, lng: -77.02 }
  ]
  const onMarkerClick = (newProps, marker) => {};

  if (!props.google) {
    return <div>Loading...</div>;
  }

  return (
    <div className="custom-map-container">
      <Map
        style={{
          minWidth: '200px',
          minHeight: '140px',
          width: '100%',
          height: '100%',
          position: 'relative'
        }}
        initialCenter={{
          lat: 42.39,
          lng: -72.52
        }}
        google={props.google}
        zoom={16}
      >
        {points.map(coordinates => (
          <Marker
            position={{ lat: coordinates.lat, lng: coordinates.lng }}
            onClick={onMarkerClick}
            icon={{
              url: 'https://res.cloudinary.com/mybukka/image/upload/c_scale,r_50,w_30,h_30/v1580550858/yaiwq492u1lwuy2lb9ua.png',
            anchor: new google.maps.Point(32, 32), // eslint-disable-line
            scaledSize: new google.maps.Size(30, 30)  // eslint-disable-line
            }}
            name={name}
          />))}
        <InfoWindow
          marker={mapConfigurations.activeMarker}
          visible={mapConfigurations.showingInfoWindow}
        >
          <div>
            <h1>{mapConfigurations.selectedPlace.name}</h1>
          </div>
        </InfoWindow>
      </Map>
    </div>
  );
};

export default GoogleApiWrapper({
  apiKey: process.env.GOOGLE_API_KEY,
  v: '3'
})(MapContainer);

MapContainer.propTypes = {
  google: PropTypes.shape({}).isRequired,
};

akolliy
la source

API Google Maps JS v3 - Exemple simple de marqueurs multiples

Réponses:

Réponse acceptée, réécrite dans ES6: