Google Maps JS API v3 - Exemple de marqueur multiple simple

Question

Google Maps JS API v3 - Exemple de marqueur multiple simple

Demandé el 17 de Juin, 2010: Quand la question a-t-elle été
277313 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Assez nouveau à l'Api Google Maps. 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 afficher une infoWindow lorsque je clique dessus pour afficher le nom.

Toute aide est grandement appréciée!

Demandé el 17 de Juin, 2010 par Wes

Answer 1

5 Réponses

Answer 2

1189voto

Daniel Vassallo Points 142049

C'est le plus simple je pourrais 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>

Capture d'écran:

Google Maps Multiple Markers

Il y a une certaine fermeture de la magie qui se passe lors du passage de la fonction de rappel de l'argument de l' addListener méthode. Cela peut être tout à fait un sujet difficile, si vous n'êtes pas familier avec la façon dont les fermetures de travail. Je suggère de vérifier les éléments suivants Mozilla article pour une brève introduction, si c'est le cas:

Mozilla Dev Center: Travailler avec des Fermetures

Répondu el 17 de Juin, 2010 par Daniel Vassallo (142049 Points )

Answer 3

63voto

Madan Sapkota Points 3464

Voici un autre exemple de chargement de marqueurs multiples avec des textes uniques title et infoWindow . 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 Markers

Google Maps API V3.11 avec plusieurs marqueurs

Il va automatiquement randomiser le Lat / Lng pour le rendre unique. L'exemple sera très utile si vous voulez tester les marqueurs 500, 1000, xxx et les performances.

Répondu el 8 de Mars, 2013 par Madan Sapkota (3464 Points )

Answer 4

41voto

Swires Points 1608

J'ai pensé que je voudrais mettre cela ici comme il semble être un point d'atterrissage pour les personnes de commencer à utiliser l'API Google Maps. Plusieurs marqueurs rendu sur le côté client est probablement la chute de nombreuses applications de cartographie de la performance sage. Il est difficile de référence, fix et dans certains cas même de l'établir il y a un problème (en raison de la mise en oeuvre navigateur différences, matériel mis à la disposition du client, les appareils mobiles, la liste est longue).

La façon la plus simple pour commencer à résoudre ce problème est d'utiliser un marqueur solution de clustering. L'idée de base est de regrouper géographiquement les lieux semblables dans un groupe avec le nombre de points affichés. Tant que l'utilisateur effectue un zoom avant dans le plan de ces groupes étendre à révéler des marqueurs individuels sous.

Peut-être la plus simple à mettre en œuvre est la markerclusterer de la bibliothèque. Une base de mise en œuvre serait comme suit (d'après la bibliothèque de l'importation):

<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ées directement à la carte sont ajoutés à un tableau. Ce tableau est ensuite passé à la bibliothèque qui gère les calculs les plus complexes et attaché à la carte.

Non seulement ces implémentations augmenter massivement côté client, la performance, mais ils aussi, dans de nombreux cas, conduire à une plus simple et moins encombré d'INTERFACE utilisateur et de faciliter la digestion de données sur de plus grandes échelles.

D'autres implémentations sont disponibles à partir de Google.

Espérons que cela aide certains de ces nouvelles pour les nuances de la cartographie.

Répondu el 29 de Janvier, 2014 par Swires (1608 Points )

Answer 5

22voto

sHaDeoNeR Points 77

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>

Répondu el 6 de Juin, 2014 par sHaDeoNeR (77 Points )

Answer 6

12voto

RC. Points 18567

À partir des exemples de l'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]
    });
  }
}

Répondu el 17 de Juin, 2010 par RC. (18567 Points )

Google Maps JS API v3 - Exemple de marqueur multiple simple

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Google Maps JS API v3 - Exemple de marqueur multiple simple

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: