Google Maps JS API v3 - Einfaches Beispiel für mehrere Markierungen

657

Ziemlich neu in der Google Maps-API. Ich habe eine Reihe von Daten, die ich durchlaufen und auf einer Karte darstellen möchte. Scheint ziemlich einfach zu sein, aber alle Multi-Marker-Tutorials, die ich gefunden habe, sind ziemlich komplex.

Verwenden wir das Datenarray von Googles Website als Beispiel:

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

Ich möchte einfach alle diese Punkte zeichnen und beim Klicken ein infoWindow-Popup anzeigen, um den Namen anzuzeigen.

javascript google-maps google-maps-api-3 wesbos
quelle

Antworten:

1128

Dies ist das einfachste, auf das ich es reduzieren könnte:

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

👨‍💻 Bearbeiten / Verzweigen eines Codepens →

BILDSCHIRMFOTO

Google Maps Mehrere Marker

Beim Übergeben des Rückrufarguments an die addListenerMethode tritt eine gewisse Schließmagie auf . Dies kann ein ziemlich kniffliges Thema sein, wenn Sie nicht mit der Funktionsweise von Verschlüssen vertraut sind. Ich würde empfehlen, den folgenden Mozilla-Artikel für eine kurze Einführung zu lesen, wenn dies der Fall ist:

❯ Mozilla Dev Center: Arbeiten mit Verschlüssen

Daniel Vassallo
quelle
4
@RaphaelDDL: Ja, diese Klammern werden benötigt, um die namenlose Funktion tatsächlich aufzurufen. Die Argumente müssen aufgrund der Funktionsweise von JavaScript (aufgrund von Schließungen) übergeben werden. Siehe meine Antwort auf diese Frage für ein Beispiel und weitere Informationen: stackoverflow.com/a/2670420/222908
Daniel Vassallo
Gute Antwort, aber es könnte weiter vereinfacht werden. Da alle Marker über individuelle InfoWindows verfügen und es JavaScript egal ist, ob Sie einem Objekt zusätzliche Eigenschaften hinzufügen, müssen Sie lediglich eine InfoWindowzu den Eigenschaften des Markers hinzufügen und dann .open()das InfoWindow von sich aus aufrufen. Ich hätte die Änderung hier gepostet, aber die Änderungen waren groß genug, dass ich meine eigene Antwort gepostet habe .
Matthew Cordaro
Warum nicht new MarkerClusterer()für massive Performance-Büste verwenden? Schauen Sie sich die Antwort von ChirsSwires an.
DevWL
hi @ Daniel Vassallo, ich habe auch die gleiche Anforderung, mehrere Marker in meinem Ionenwinkelprojekt anzuzeigen. Bitte helfen Sie mir, ich habe bereits eine Frage zum Stackoverflow gestellt. Hier ist der Fragenlink
Saif
Es klappt. Vielen Dank. Wie werden Sie Markierungen aus Google Map entfernen, weil Sie eine einzelne Instanz von Markierungen verwenden und in einer Schleife initialisieren? Bitte teilen Sie Ihre Gedanken.
Kamlesh
59

Hier ist ein weiteres Beispiel für mehr Marker mit einem einzigartigen Laden titleund infoWindowText. Getestet mit der neuesten Google Maps API 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>

Screenshot von 250 Markern:

Google Maps API V3.11 mit mehreren Markern

Das Lat / Lng wird automatisch randomisiert, um es eindeutig zu machen. Dieses Beispiel ist sehr hilfreich, wenn Sie 500, 1000, xxx Marker und die Leistung testen möchten.

Madan Sapkota
quelle
1
Seien Sie vorsichtig, wenn Sie Antworten auf mehrere Fragen kopieren und einfügen. Diese werden von der Community in der Regel als "Spam" gekennzeichnet. Wenn Sie dies tun, bedeutet dies normalerweise, dass die Fragen Duplikate sind. Kennzeichnen Sie sie stattdessen als solche.
Kev
1
Dadurch werden infoWindowfür jeden Marker viele Popups infoWindowangezeigt und der andere wird nicht ausgeblendet, wenn er gerade angezeigt wird. es ist wirklich hilfreich :)
Kannika
@Anup, wenn Sie nur die Frage lesen und kommentieren, wäre es besser. Die Frage lautet "Beispiel für mehrere Marker", ob es sich um ein zufälliges oder ein eigenes bla bla handelt.
Madan Sapkota
Warum nicht new MarkerClusterer()für massive Performance-Büste verwenden? Schauen Sie sich die Antwort von ChirsSwires an.
DevWL
1
@ DevWL, es wurde bereits 2013 beantwortet. Sie können es aktualisieren.
Madan Sapkota
39

Ich dachte, ich würde dies hier einfügen, da es ein beliebter Landepunkt für diejenigen zu sein scheint, die anfangen, Google Maps-APIs zu verwenden. Mehrere auf der Clientseite gerenderte Markierungen sind wahrscheinlich der Nachteil vieler Mapping-Anwendungen in Bezug auf die Leistung. Es ist schwierig, ein Benchmarking durchzuführen, das Problem zu beheben und in einigen Fällen sogar festzustellen, ob ein Problem vorliegt (aufgrund von Unterschieden bei der Browserimplementierung, der dem Client zur Verfügung stehenden Hardware und mobilen Geräten wird die Liste fortgesetzt).

Der einfachste Weg, um dieses Problem zu beheben, ist die Verwendung einer Marker-Clustering-Lösung. Die Grundidee besteht darin, geografisch ähnliche Standorte mit der Anzahl der angezeigten Punkte in einer Gruppe zu gruppieren. Wenn der Benutzer in die Karte zoomt, werden diese Gruppen erweitert, um einzelne Markierungen darunter anzuzeigen.

Am einfachsten zu implementieren ist möglicherweise die Markerclusterer- Bibliothek. Eine grundlegende Implementierung wäre wie folgt (nach Bibliotheksimporten):

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

Die Markierungen werden einem Array hinzugefügt, anstatt direkt zur Karte hinzugefügt zu werden. Dieses Array wird dann an die Bibliothek übergeben, die komplexe Berechnungen für Sie übernimmt, und an die Karte angehängt.

Diese Implementierungen steigern nicht nur die Leistung auf der Clientseite massiv, sondern führen in vielen Fällen auch zu einer einfacheren und übersichtlicheren Benutzeroberfläche und einer einfacheren Datenverarbeitung in größeren Maßstäben.

Andere Implementierungen sind bei Google erhältlich.

Hoffe, dies hilft einigen von denen, die neu in den Nuancen des Mappings sind.

ChrisSwires
quelle
2
Danke, eine große große Hilfe! Es gibt einen Größen- oder Größenunterschied in der Leistung, indem zuerst die google.map-Datenpunkte erstellt und dann an die Zuordnungsbibliothek übergeben werden, in diesem Fall MarketCluster zum Plotten. Mit ungefähr 150.000 Datenpunkten dauerte das Laden des ersten Beitrags von 'Daniel Vassallo' ungefähr 2 Minuten, diese 5 Sekunden. Vielen Dank 'Swires'!
Waqas
1
Ich dachte, dies wäre ein guter Ort dafür. Ich würde mir vorstellen, dass die meisten Leute zuerst auf dem Stapel landen, wenn sie mit Google Maps in Verbindung stehen. Diese Seite lautet: "Warum dauert das Laden meiner Karte so lange?".
ChrisSwires
@Monic Es ist alles, was Ihr Datensatz ist, es ist nur eine Platzhaltervariable.
ChrisSwires
20

Asynchrone Version:

<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
quelle
15

Dies ist das Arbeitsbeispiel für ein Kartenbild 

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

    }); 
}

Vollständiges Arbeitsbeispiel. Sie können einfach kopieren, einfügen und verwenden.

Anup
quelle
12

Aus Google Map API-Beispielen :

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

quelle
8
Diese Antwort enthält nicht den infoWindow-Teil
onurmatik
@omat Seltsamerweise deuten Googles eigene Dokumente nicht darauf hin, dass es einen infoWindow-Teil geben muss. Aber trotzdem funktioniert es auch nicht bei mir :(
Emil Ahlbäck
11

Hier ist eine andere Version, die ich geschrieben habe, um Kartenimmobilien zu speichern, bei der der Infowindow-Zeiger auf das tatsächliche Lat und Long des Markers gesetzt wird, während der Marker vorübergehend ausgeblendet wird, während das Infowindow angezeigt wird.

Außerdem entfällt die Standardzuweisung für "Marker" und die Verarbeitung wird beschleunigt, indem der neue Marker direkt dem Marker-Array bei der Marker-Erstellung zugewiesen wird. Beachten Sie jedoch, dass sowohl dem Marker als auch dem Infofenster zusätzliche Eigenschaften hinzugefügt wurden, sodass dieser Ansatz etwas unkonventionell ist ... aber das bin ich!

In diesen Infowindow-Fragen wird nie erwähnt, dass das Standard-Infowindow NICHT am oberen und unteren Rand des Markierungspunkts platziert wird, sondern am oberen Rand des Markierungsbilds. Die Markierungssichtbarkeit muss ausgeblendet sein, damit dies funktioniert. Andernfalls schiebt die Karten-API den Infowindow-Anker wieder an den oberen Rand des Markierungsbilds.

Verweise auf die Markierungen im Array "Markierungen" werden sofort nach der Deklaration der Markierungen für zusätzliche Verarbeitungsaufgaben erstellt, die später gewünscht werden (Ausblenden / Anzeigen, Ergreifen der Koordinaten usw.). Dies erspart den zusätzlichen Schritt, das Markerobjekt 'marker' zuzuweisen und dann den 'marker' in das marker-Array zu verschieben ... eine Menge unnötiger Verarbeitung in meinem Buch.

Wie auch immer, eine andere Sicht auf Infofenster, und ich hoffe, es hilft, Sie zu informieren und zu inspirieren.

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

Hier ist eine funktionierende JSFiddle

Zusätzlicher Hinweis
Sie werden in diesen angegebenen Google-Beispieldaten einen vierten Platz im Array "Standorte" mit einer Nummer feststellen. In diesem Beispiel können Sie diesen Wert auch für die Markierungs-ID anstelle des aktuellen Schleifenwerts verwenden, sodass ...

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],
  });
};
Offenbarung
quelle
10

Akzeptierte Antwort, umgeschrieben in 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);
  })
})
Seen sind
quelle
6

Quelle Link -

Demo Link

Vollständiger HTML-Code

  • InfoWindow beim Klicken oder Bewegen anzeigen.
  • Es wird nur ein InfoWindow angezeigt

Geben Sie hier die Bildbeschreibung ein

    <!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
quelle
1
Vielen Dank für die closeOtherInfo, ich konnte bis zu Ihrer Antwort keine anständige Lösung finden, um mit merkercluster zu arbeiten. :)
Chris Loughnane
1
Das habe ich gesucht. Danke Mann Arbeit großartig im Jahr 2020
Faizan Anwer Ali Rupani
5

Das Hinzufügen eines Markers in Ihrem Programm ist sehr einfach. Sie können diesen Code einfach hinzufügen:

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

Die folgenden Felder sind besonders wichtig und werden häufig beim Erstellen eines Markers festgelegt:

  • position(erforderlich) gibt ein LatLng an, das die anfängliche Position des Markers identifiziert. Eine Möglichkeit zum Abrufen eines LatLng ist die Verwendung des Geokodierungsdienstes .
  • map(optional) gibt die Karte an, auf der die Markierung platziert werden soll. Wenn Sie beim Aufbau der Markierung keine Karte angeben, wird die Markierung erstellt, aber nicht an die Karte angehängt (oder auf dieser angezeigt). Sie können den Marker später hinzufügen, indem Sie die setMap()Methode des Markers aufrufen .

Beachten Sie , dass im Beispielfeld im Titelfeld der Titel des Markers festgelegt wird, der als QuickInfo angezeigt wird.

Sie können die Google API-Dokumentation hier einsehen .

Dies ist ein vollständiges Beispiel zum Setzen einer Markierung in einer Karte. Seien Sie vorsichtig, Sie müssen YOUR_API_KEYdurch Ihren Google API-Schlüssel ersetzen :

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

Wenn Sie nun Markierungen eines Arrays in einer Karte zeichnen möchten, gehen Sie folgendermaßen vor:

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

Dieses Beispiel gibt mir folgendes Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Sie können Ihrer PIN auch ein infoWindow hinzufügen. Sie brauchen nur diesen 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!'
    });

Die Dokumentation von Google zu infoWindows finden Sie hier .

Jetzt können wir das infoWindow öffnen, wenn der Marker wie folgt "clik" ist:

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

Beachten Sie, dass Sie Listener hier in Google Developer eine Dokumentation dazu haben können .

Und schließlich können wir ein infoWindow in eine Markierung zeichnen, wenn der Benutzer darauf klickt. Dies ist mein vollständiger Code:

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

Normalerweise sollten Sie dieses Ergebnis haben:

Dein Ergebnis

SphynxTech
quelle
4

Nach der Antwort von Daniel Vassallo ist hier eine Version, die sich einfacher mit dem Abschlussproblem befasst.

Da alle Marker ein individuelles InfoWindow haben und es JavaScript egal ist, ob Sie einem Objekt zusätzliche Eigenschaften hinzufügen, müssen Sie lediglich ein InfoWindow zu den Eigenschaften des Markers hinzufügen und dann .open()das InfoWindow von sich aus aufrufen !

Bearbeiten: Bei genügend Daten kann das Laden der Seite viel Zeit in Anspruch nehmen. Anstatt das InfoWindow mit dem Marker zu erstellen , sollte die Erstellung nur bei Bedarf erfolgen. Beachten Sie, dass alle Daten, die zum Erstellen des InfoWindow verwendet werden, als Eigenschaft ( ) an den Marker angehängt werden müssen data. Beachten Sie auch, dass das Ereignis nach dem ersten Klick infoWindowals Eigenschaft seiner Markierung bestehen bleibt, sodass der Browser nicht ständig rekonstruieren muss.

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
quelle
2

Hier ist ein nahezu vollständiges Beispiel für eine Javascript-Funktion, mit der mehrere in einem JSONObject definierte Marker zugelassen werden.

Es werden nur die Markierungen angezeigt, die sich in den Grenzen der Karte befinden.

Dies ist wichtig, damit Sie keine zusätzliche Arbeit leisten.

Sie können auch eine Begrenzung für die Markierungen festlegen, damit keine extreme Anzahl von Markierungen angezeigt wird (wenn die Möglichkeit besteht, dass etwas in Ihrer Verwendung enthalten ist).

Es werden auch keine Markierungen angezeigt, wenn sich die Mitte der Karte nicht mehr als 500 Meter geändert hat.
Dies ist wichtig, da Sie nicht möchten, dass die Karte die Markierungen neu lädt, wenn ein Benutzer auf die Markierung klickt und dabei versehentlich die Karte zieht.

Ich habe diese Funktion an den Listener für inaktive Ereignisse für die Karte angehängt, sodass Markierungen nur angezeigt werden, wenn die Karte inaktiv ist, und die Markierungen nach einem anderen Ereignis erneut angezeigt werden.

Im Action-Screenshot gibt es eine kleine Änderung im Screenshot, die mehr Inhalt im Infofenster zeigt. Geben Sie hier die Bildbeschreibung ein von pastbin.com eingefügt

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>
Erweitern Sie das Snippet

Thunderstick
quelle
0

Hier ist ein Beispiel für mehrere Marker in Reactjs .

Geben Sie hier die Bildbeschreibung ein

Unten ist die Kartenkomponente

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
quelle