657

Cukup baru di Google Maps Api. Saya punya array data yang ingin saya daur ulang dan plot di peta. Tampaknya cukup sederhana, tetapi semua tutorial multi-marker yang saya temukan cukup kompleks.

Mari kita gunakan array data dari situs google sebagai contoh:

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

Saya hanya ingin memplot semua poin ini dan memiliki infoWindow pop up ketika diklik untuk menampilkan nama.

javascript google-maps google-maps-api-3 wesbos
sumber

1128

Ini adalah yang paling sederhana yang dapat saya kurangi menjadi:

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

👨‍💻 Edit / garpu pada Codepen →

SCREENSHOT

Google Maps Banyak Penanda

Ada beberapa sihir penutupan terjadi ketika melewati argumen callback ke addListenermetode. Ini bisa menjadi topik yang cukup rumit jika Anda tidak terbiasa dengan cara penutupan. Saya sarankan memeriksa artikel Mozilla berikut untuk pengantar singkat jika itu masalahnya:

❯ Pusat Pengembangan Mozilla: Bekerja dengan Penutupan

Daniel Vassallo
sumber

4

@ RaphaelDDL: Ya tanda kurung itu diperlukan untuk benar-benar memanggil fungsi tanpa nama. Argumen perlu disampaikan karena cara kerja JavaScript (karena penutupan). Lihat jawaban saya untuk pertanyaan ini untuk contoh dan info lebih lanjut: stackoverflow.com/a/2670420/222908

Daniel Vassallo

Jawaban yang bagus, tetapi bisa disederhanakan lebih lanjut. Karena semua penanda akan memiliki InfoWindows individual dan karena JavaScript tidak peduli jika Anda menambahkan properti tambahan ke objek, yang perlu Anda lakukan adalah menambahkan InfoWindowproperti Penanda dan kemudian memanggil .open()InfoWindow dari dirinya sendiri. Saya akan memposting perubahan di sini, tetapi modifikasinya cukup besar sehingga saya memposting jawaban saya sendiri .

Matius Cordaro

Mengapa tidak digunakan new MarkerClusterer()untuk bust kinerja besar? Lihat jawaban ChirsSwires.

DevWL

hai @ Daniel Vassallo, saya juga memiliki persyaratan yang sama untuk menampilkan beberapa penanda dalam proyek sudut ionik saya. tolong bantu saya, saya sudah mengajukan pertanyaan tentang stackoverflow. di sini adalah tautan pertanyaan: stackoverflow.com/questions/57985967/…

Saif

Berhasil. Terima kasih. Bagaimana Anda menghapus marker dari google map karena Anda menggunakan satu instance marker dan menginisialisasi dalam lingkaran. Silakan bagikan pemikiran Anda.

Kamlesh

59

Berikut adalah contoh lain dari pemuatan banyak marker dengan teks titledan unik infoWindow. Diuji dengan google maps API V3.11 terbaru.

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

Cuplikan layar 250 Penanda:

Google Maps API V3.11 dengan Banyak Penanda

Ini akan secara otomatis mengacak Lat / Lng untuk membuatnya unik. Contoh ini akan sangat membantu jika Anda ingin menguji marker dan kinerja 500, 1000, xxx.

Madan Sapkota
sumber

1

Hati-hati saat memposting salin dan tempel jawaban boilerplate / kata demi kata untuk beberapa pertanyaan, ini cenderung ditandai sebagai "spam" oleh komunitas. Jika Anda melakukan ini, biasanya itu berarti pertanyaannya adalah duplikat, jadi tandai saja.

Kev

1

Ini akan mendapatkan banyak pop up infoWindowuntuk setiap penanda dan tidak akan menyembunyikan yang lain infoWindowjika saat ini ditampilkan. ini sangat membantu :)

Kannika

@Anup, jika Anda baru saja membaca pertanyaan dan komentar itu akan lebih baik. pertanyaannya adalah menanyakan "contoh untuk banyak penanda" apakah itu acak atau bla Anda sendiri.

Madan Sapkota

Sekali lagi mengapa tidak digunakan new MarkerClusterer()untuk bust kinerja besar? Lihat jawaban ChirsSwires.

DevWL

1

@DevWL, dijawab kembali pada tahun 2013. Anda bebas untuk memperbarui.

Madan Sapkota

39

Saya pikir saya akan meletakkan ini di sini karena tampaknya menjadi titik pendaratan yang populer bagi mereka yang mulai menggunakan Google Maps API. Beberapa penanda yang diberikan pada sisi klien mungkin adalah kejatuhan banyak aplikasi pemetaan dengan bijaksana. Sulit untuk membuat tolok ukur, memperbaiki dan dalam beberapa kasus bahkan menetapkan ada masalah (karena perbedaan implementasi browser, perangkat keras yang tersedia untuk klien, perangkat seluler, daftarnya terus berjalan).

Cara paling sederhana untuk mulai mengatasi masalah ini adalah dengan menggunakan solusi pengelompokan marker. Ide dasarnya adalah mengelompokkan lokasi yang mirip secara geografis ke dalam grup dengan jumlah poin yang ditampilkan. Saat pengguna memperbesar peta, grup ini membesar untuk mengungkap penanda individual di bawahnya.

Mungkin yang paling sederhana untuk diterapkan adalah perpustakaan markerclusterer . Implementasi dasar adalah sebagai berikut (setelah impor perpustakaan):

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

Marker alih-alih ditambahkan langsung ke peta ditambahkan ke array. Array ini kemudian diteruskan ke perpustakaan yang menangani perhitungan kompleks untuk Anda dan dilampirkan ke peta.

Implementasi ini tidak hanya secara besar-besaran meningkatkan kinerja sisi klien, tetapi mereka juga dalam banyak kasus menyebabkan UI yang lebih sederhana dan tidak berantakan dan lebih mudahnya penggalian data pada skala yang lebih besar.

Implementasi lain tersedia dari Google.

Semoga ini bisa membantu beberapa dari mereka yang lebih baru dengan nuansa pemetaan.

ChrisSwires
sumber

2

Terima kasih, bantuan besar! Ada perbedaan urutan atau besarnya dalam kinerja, dengan membuat poin data google.map terlebih dahulu dan meneruskannya ke perpustakaan pemetaan, dalam hal ini MarketCluster untuk memplot. dengan sekitar 150.000 titik data, pos pertama oleh 'Daniel Vassallo' membutuhkan waktu sekitar 2 menit untuk dimuat, 5 detik ini. Terima kasih banyak 'Swires'!

Waqas

1

Saya pikir ini akan menjadi tempat yang bagus untuk ini, saya akan membayangkan kebanyakan orang pertama kali mendarat di tumpukan ketika terkait dengan peta Google adalah halaman ini, dan ada yang kedua adalah 'mengapa peta saya butuh waktu begitu lama untuk memuat'.

ChrisSwires

@Monic, apa pun kumpulan data Anda, itu hanya variabel pengganti.

ChrisSwires

20

Versi asinkron:

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

15

Ini adalah contoh gambar peta yang berfungsi

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

    }); 
}

Contoh kerja penuh. Anda bisa menyalin, menempel, dan menggunakan.

Anup
sumber

12

Dari sampel Google Map API :

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

sumber

8

jawaban ini tidak termasuk bagian infoWindow

onurmatik

@omat Anehnya, dokumen Google sendiri tidak menyarankan harus ada bagian infoWindow. Tetapi bagaimanapun juga itu tidak bekerja untuk saya :(

Emil Ahlbäck

11

Berikut adalah versi lain yang saya tulis untuk menyimpan peta real estat, yang menempatkan penunjuk infowindow pada lat aktual dan panjang marker, sementara menyembunyikan penanda sementara infowindow sedang ditampilkan.

Itu juga menghilangkan penugasan 'penanda' standar dan mempercepat pemrosesan dengan secara langsung menetapkan penanda baru ke larik penanda pada pembuatan marker. Namun perlu dicatat, bahwa properti tambahan telah ditambahkan ke marker dan infowindow, jadi pendekatan ini sedikit tidak konvensional ... tapi itu saya!

Tidak pernah disebutkan dalam pertanyaan infowindow ini, bahwa infowindow standar TIDAK ditempatkan pada lat dan lng pada titik marker, melainkan di bagian atas gambar marker. Visibilitas marker harus disembunyikan agar ini berfungsi, jika tidak, Maps API akan mendorong anchor infowindow kembali ke atas gambar marker.

Referensi ke penanda dalam larik 'penanda' dibuat segera setelah deklarasi penanda untuk setiap tugas pemrosesan tambahan yang mungkin diinginkan kemudian (menyembunyikan / menunjukkan, meraih coord, dll ...). Ini menyimpan langkah tambahan untuk menetapkan objek marker ke 'marker', dan kemudian mendorong 'marker' ke array marker ... banyak pemrosesan yang tidak perlu dalam buku saya.

Ngomong-ngomong, pandangan berbeda tentang arus masuk, dan harap ini membantu menginformasikan dan menginspirasi Anda.

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

Ini JSFiddle yang berfungsi

Catatan Tambahan
Anda akan melihat dalam data contoh Google yang diberikan ini tempat keempat dalam array 'lokasi' dengan angka. Diberikan ini dalam contoh, Anda juga bisa menggunakan nilai ini untuk id penanda menggantikan nilai loop saat ini, sehingga ...

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

Pencerahan
sumber

10

Jawaban yang diterima, ditulis ulang dalam 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);
  })
})

danau
sumber

6

Tautan Sumber

Demo Link

Kode HTML lengkap

Tampilkan InfoWindow saat Klik atau Arahkan.
Hanya satu InfoWindow yang akan ditampilkan

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

Kode Mata-mata
sumber

1

Terima kasih atas closeOtherInfo, saya tidak dapat menemukan solusi yang layak untuk bekerja dengan merkercluster sampai jawaban Anda. :)

chris loughnane

1

Nah, itu yang saya cari. Terima kasih kawan bekerja hebat pada tahun 2020

Faizan Anwer Ali Rupani

5

Menambahkan penanda di program Anda sangat mudah. Anda bisa menambahkan kode ini:

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

Bidang-bidang berikut ini sangat penting dan biasanya ditetapkan saat Anda membuat penanda:

position(wajib) menentukan LatLng yang mengidentifikasi lokasi awal marker. Salah satu cara untuk mengambil LatLng adalah dengan menggunakan layanan Geocoding .
map(opsional) menentukan Peta tempat menempatkan penanda. Jika Anda tidak menentukan peta pada konstruksi marker, marker dibuat tetapi tidak dilampirkan pada (atau ditampilkan pada) peta. Anda dapat menambahkan marker nanti dengan memanggil metode marker itu setMap().

Perhatikan , pada contoh, bidang judul mengatur judul penanda yang akan muncul sebagai tooltip.

Anda dapat berkonsultasi dengan dokumentasi api Google di sini .

Ini adalah contoh lengkap untuk menetapkan satu penanda di peta. Hati-hati penuh, Anda harus mengganti YOUR_API_KEYdengan kunci API Google Anda :

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

Sekarang, jika Anda ingin plot penanda array di peta, Anda harus melakukan ini:

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

Contoh ini memberi saya hasil berikut:

Anda juga dapat menambahkan infoWindow di pin Anda. Anda hanya perlu kode ini:

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!'
    });

Anda dapat memiliki dokumentasi Google tentang infoWindows di sini .

Sekarang, kita bisa membuka infoWindow ketika markernya adalah "clik" seperti ini:

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

Catatan , Anda dapat memiliki beberapa dokumentasi tentang di Listener sini di pengembang google.

Dan, akhirnya, kita dapat memplot infoWindow di marker jika pengguna mengkliknya. Ini kode lengkap saya:

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

Biasanya, Anda harus mendapatkan hasil ini:

SphynxTech
sumber

4

Mengikuti jawaban Daniel Vassallo , berikut adalah versi yang menangani masalah penutupan dengan cara yang lebih sederhana.

Sejak karena semua penanda akan memiliki individu InfoWindow dan karena JavaScript tidak peduli jika Anda menambahkan properti ekstra untuk sebuah objek, semua yang perlu Anda lakukan adalah menambahkan InfoWindow ke Marker properti dan kemudian memanggil .open()pada InfoWindow dari dirinya sendiri!

Sunting: Dengan data yang cukup, pageload bisa memakan banyak waktu, jadi alih-alih membangun InfoWindow dengan marker, konstruksi seharusnya terjadi hanya jika diperlukan. Perhatikan bahwa data apa pun yang digunakan untuk membangun InfoWindow harus ditambahkan ke Marker sebagai properti ( data). Perhatikan juga bahwa setelah acara klik pertama, infoWindowakan tetap sebagai properti penanda itu sehingga browser tidak perlu merekonstruksi secara konstan.

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
sumber

2

Berikut ini adalah contoh fungsi javascript yang hampir lengkap yang akan memungkinkan banyak penanda didefinisikan dalam suatu JSONObject.

Ini hanya akan menampilkan penanda yang ada di batas peta.

Ini penting agar Anda tidak melakukan pekerjaan ekstra.

Anda juga dapat menetapkan batas untuk marker sehingga Anda tidak menunjukkan jumlah marker yang ekstrem (jika ada kemungkinan sesuatu dalam penggunaan Anda);

itu juga tidak akan menampilkan spidol jika pusat peta tidak berubah lebih dari 500 meter.
Ini penting karena jika pengguna mengklik marker dan secara tidak sengaja menyeret peta saat melakukannya, Anda tidak ingin peta memuat ulang marker.

Saya melampirkan fungsi ini ke pendengar acara menganggur untuk peta sehingga penanda hanya akan ditampilkan ketika peta menganggur dan akan menampilkan kembali penanda setelah acara yang berbeda.

Dalam cuplikan layar tindakan, ada sedikit perubahan pada cuplikan layar yang menunjukkan lebih banyak konten di jendela depan. disisipkan dari pastbin.com

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

Luaskan cuplikan

Petir
sumber

0

Berikut adalah contoh beberapa penanda di Reactjs .

Di bawah ini adalah komponen peta

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
sumber

Google Maps JS API v3 - Contoh Simple Multiple Marker

Jawaban:

Jawaban yang diterima, ditulis ulang dalam ES6: