Jak wyświetlić wiele lokalizacji w serwisie Mapy Google?

Question

Mam wiele danych długości i położenia i chcę je pokazać na mapie google za pomocą pinezek.

Jak korzystać z interfejsu API mapy google w tym celu?

Answer 1

Powtarzasz swoją tablicę i tworzysz nową instancję Marker dla każdej pary. To proste:

<script> 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(55.378051, -3.435973), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoom: 8 
    }); 

    var locations = [ 
     new google.maps.LatLng(54.97784, -1.612916), 
     new google.maps.LatLng(55.378051, -3.435973]) 
     // and additional coordinates, just add a new item 
    ]; 

    locations.forEach(function (location) { 
     var marker = new google.maps.Marker({ 
      position: location, 
      map: map 
     }); 
    }); 
</script> 

Działa to dla dowolnej liczby par szerokości/długości geograficznej; po prostu dodaj nowy element do tablicy locations.

Answer 2

można zrobić coś podobnego

var map = new GMap2(document.getElementById("map_canvas")); 
    map.addControl(new GSmallMapControl()); 
    map.setCenter(new GLatLng(37.4419, -122.1419), 13); 

    // Create our "tiny" marker icon 
    var blueIcon = new GIcon(G_DEFAULT_ICON); 
    blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"; 

    // Set up our GMarkerOptions object 
    markerOptions = { icon:blueIcon }; 

    // Add 10 markers to the map at random locations 
    var bounds = map.getBounds(); 
    var southWest = bounds.getSouthWest(); 
    var northEast = bounds.getNorthEast(); 
    var lngSpan = northEast.lng() - southWest.lng(); 
    var latSpan = northEast.lat() - southWest.lat(); 
    for (var i = 0; i < 10; i++) { 
     var point = new GLatLng(southWest.lat() + latSpan * Math.random(), 
     southWest.lng() + lngSpan * Math.random()); 
     map.addOverlay(new GMarker(point, markerOptions)); 
    } 

Brałem ten przykład z Google dokumentacji API gdzie pokazały, jak można użyć łac ong pokazać rzeczy

sprawdź to dla szczegółów

Showing markers using Google API

Chociaż użyłem v2, który został wycofany, ale koncepcja do użycia będzie mniej więcej taka sama