How do I show multiple locations on Google Maps?

Question

I have some data on longitude and relationships, and I want to show them on the google map with contacts.

How to use google api for this?

Answer 1

You iterate over the 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 element to the locations array.

Answer 2

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 cited this example from the Google API documentation, where they showed how you can use lat ong to display things

See details

Display markers using the Google API

Although I used v2, which is deprecated, but the concept for use will be more or less the same.