CODEWITHSUNDEEP
apigoogle-mapsgoogle-maps-api-3
Jun
Jun

Reputation: 183

How do I show multiple locations in Google Maps?

I have multiple longtitude and attitude data and I want to show them in the google map with pins.

How to use the google map API to do this?

Upvotes: 7

Views: 21943

Answers (2)

Martin Bean
Martin Bean

Reputation: 39389

You iterate over your array, and create a new Marker instance for each pair. It's simple:

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

This works for any number of latitude/longitude pairs; just add a new item to the locations array.

Upvotes: 9

Umesh Awasthi
Umesh Awasthi

Reputation: 23587

you can do something like

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

I have taken this example from google API documentation where they have shown how you can use lat ong to show things

Refer this for details

Showing markers using Google API

Though i have used v2 which has been deprecated but concept to use will be more or less same

Upvotes: 0

Related Questions