google map multiple locations

How to Display Multiple Geo-locations in Google Maps Based on Co-ordinates

Coding & Programming

Developing a Google Map application or just adding the map to an already functional application appears to be somehow simple since Google provided a guide on how to go about it on their website. Just yesterday, a developer friend of mine asked me to help him find a way in which he could display multiple Geo-locations in Google maps based on co-ordinates.

I decided to drop my reply to him here so as to help others who might want to achieve similar task but don’t know how to go about it. As easy as it sounds, running such is a bit daunting as at the time of this writing. It appears there is no inbuilt function to search for multiple sets of GPS co-ordinates in bulk, within Google Maps. My advice was to consider using the Google Maps API for this purpose. You can experiment using the code below;

<!DOCTYPE html>
<html>
  <head>
    <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 map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

 

For a full guid on how to use the Google Maps API to display multiple Geo-locations in Google Maps based on co-ordinates, simply visit the Google Developer page. Feel free to contact me using the comment box below if you are finding the guide on the Google Developer page difficult to comprehend or apply so we can look into your project together.

Leave a Reply

Your email address will not be published. Required fields are marked *