Finding multiple locations with Google Maps API Geocoding

Question

Finding multiple locations with Google Maps API Geocoding

I've created a small JavaScript code to geocode various locations and display them on a map. While I can successfully plot a single location, I'm struggling to get it working for multiple locations. Below is the code that currently works for one location only.

var geocoder = new google.maps.Geocoder();
    var address = "Melbourne";

    geocoder.geocode( { 'address': address}, function(results, status) {

        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();


        initialize(latitude,longitude);

        }); 


    function initialize(latitude,longitude) {
        var latlng1 = new google.maps.LatLng(latitude,longitude);

        var myOptions = {
          zoom: 2,
          panControl: false,
            zoomControl: false,
            mapTypeControl: false,
            streetViewControl: false,
          center: latlng1,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
          scrollwheel: false,
        };
        var map = new google.maps.Map(document.getElementById("google-container"),myOptions);

        var marker = new google.maps.Marker({
          position: latlng1, 
          map: map, 
        }); 
      }

I attempted to add a second location with the code below, but it seems I missed something important. It's clear that I'm still learning JavaScript.

    var geocoder = new google.maps.Geocoder();
var address = "Seoul";
var address2 = "Melbourne";

geocoder.geocode( { 'address': address}, function(results, status) {

    var latitude = results[0].geometry.location.lat();
    var longitude = results[0].geometry.location.lng();


    initialize(latitude,longitude);

    }); 

    geocoder.geocode( { 'address': address2}, function(results, status) {

    var latitude2 = results[0].geometry.location.lat();
    var longitude2 = results[0].geometry.location.lng();


    initialize(latitude2,longitude2);

    }); 


function initialize(latitude,longitude) {
    var latlng1 = new google.maps.LatLng(latitude,longitude);
    var latlng2 = new google.maps.LatLng(latitude2,longitude2);

    var myOptions = {
      zoom: 2,
      panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
      center: latlng1,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      scrollwheel: false,
    };
    var map = new google.maps.Map(document.getElementById("google-container"),myOptions);

    var marker = new google.maps.Marker({
      position: latlng1, 
      map: map, 
    }); 
      var marker2 = new google.maps.Marker({
      position: latlng2, 
      map: map, 
    }); 
  }

Any thoughts or suggestions would be greatly appreciated!

javascript google-maps geocoding

Answer 1

Answer №1

This solution is effective for managing a small number of locations, typically between two and ten. However, as the number of locations increases, it is important to be mindful of potential query and rate limits on the Geocoder

One approach is to separate out the initialize function, which is responsible for setting up the map.
It is recommended to create a distinct geocoder instance for each location. While it is possible to reuse the same geocoder instance by utilizing it in the callback function, this may not be efficient for only two points.

Here is a working fiddle

For reference, below is a snippet of the functional code:

function initialize() {
    var myOptions = {
        zoom: 2,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        center: {
            lat: 0,
            lng: 0
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        scrollwheel: false,
    };
    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("google-container"), myOptions);
    var geocoder = new google.maps.Geocoder();
    var address = "Seoul";

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
            });
            bounds.extend(results[0].geometry.location);
            map.fitBounds(bounds);
        } else {
            alert("Geocode of " + address + " failed," + status);
        }
    });
    var geocoder2 = new google.maps.Geocoder();
    var address2 = "Melbourne";
    geocoder2.geocode({
        'address': address2
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
            });
            bounds.extend(results[0].geometry.location);
            map.fitBounds(bounds);

        } else {
            alert("Geocode of " + address2 + " failed," + status);
        }
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

html, body, #google-container {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="google-container" style="border: 2px solid #3872ac;"></div>

Answer 2

This solution is effective for managing a small number of locations, typically between two and ten. However, as the number of locations increases, it is important to be mindful of potential query and rate limits on the Geocoder

One approach is to separate out the initialize function, which is responsible for setting up the map.
It is recommended to create a distinct geocoder instance for each location. While it is possible to reuse the same geocoder instance by utilizing it in the callback function, this may not be efficient for only two points.

Here is a working fiddle

For reference, below is a snippet of the functional code:

function initialize() {
    var myOptions = {
        zoom: 2,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        center: {
            lat: 0,
            lng: 0
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        scrollwheel: false,
    };
    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("google-container"), myOptions);
    var geocoder = new google.maps.Geocoder();
    var address = "Seoul";

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
            });
            bounds.extend(results[0].geometry.location);
            map.fitBounds(bounds);
        } else {
            alert("Geocode of " + address + " failed," + status);
        }
    });
    var geocoder2 = new google.maps.Geocoder();
    var address2 = "Melbourne";
    geocoder2.geocode({
        'address': address2
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map,
            });
            bounds.extend(results[0].geometry.location);
            map.fitBounds(bounds);

        } else {
            alert("Geocode of " + address2 + " failed," + status);
        }
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

html, body, #google-container {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="google-container" style="border: 2px solid #3872ac;"></div>

Answer 3

Answer №2

Below is an example of optimizing code to process multiple addresses efficiently:
      <div id="map-canvas"
   style='position: relative; height: 100%; width: 100%; margin-left: 0px; border: #B8B6B8 solid 1px;; background-color: #ffffff;'>
  </div> 
<script type="text/javascript">
    var geocoder;
    var map;

    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
            zoom : 17,
            center : latlng,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }

    function codeAddress(addressList) {
        try {
            var icount = addressList.length;
            for (var i = 0; i < icount; i++) {
                getGeoCoder(addressList[i]);
            }
        } catch (error) {
            alert(error);
        }
    }

    function getGeoCoder(address) {
        geocoder.geocode({
            'address' : address
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map : map,
                    position : results[0].geometry.location
                });
            } else {
                geterrorMgs(address); // handle address not found
            }
        });
    }

    // Client's call - List of addresses to be processed
    var addressList = [ '1420 orchardview dr Pittsburgh,  PA,  USA', '1440 orchardview dr Pittsburgh,  PA,  USA', '1410 orchardview dr Pittsburgh,  PA,  USA' ];
    
    initialize();  
    codeAddress(addressList);
</script>

Answer 4

Below is an example of optimizing code to process multiple addresses efficiently:
      <div id="map-canvas"
   style='position: relative; height: 100%; width: 100%; margin-left: 0px; border: #B8B6B8 solid 1px;; background-color: #ffffff;'>
  </div> 
<script type="text/javascript">
    var geocoder;
    var map;

    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var mapOptions = {
            zoom : 17,
            center : latlng,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }

    function codeAddress(addressList) {
        try {
            var icount = addressList.length;
            for (var i = 0; i < icount; i++) {
                getGeoCoder(addressList[i]);
            }
        } catch (error) {
            alert(error);
        }
    }

    function getGeoCoder(address) {
        geocoder.geocode({
            'address' : address
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map : map,
                    position : results[0].geometry.location
                });
            } else {
                geterrorMgs(address); // handle address not found
            }
        });
    }

    // Client's call - List of addresses to be processed
    var addressList = [ '1420 orchardview dr Pittsburgh,  PA,  USA', '1440 orchardview dr Pittsburgh,  PA,  USA', '1410 orchardview dr Pittsburgh,  PA,  USA' ];
    
    initialize();  
    codeAddress(addressList);
</script>

Finding multiple locations with Google Maps API Geocoding

Answer №1

Answer №2

Similar questions

The Ajax search box displays results from the most recent query

Avoid sudden page movements when validating user input

ClassNames Central - showcasing a variety of class names for interpolation variables

Webpack has made Rails .js.erb templates obsolete

Retrieve JSON and HTML in an AJAX request

Sorting numbers in JavaScript from highest to lowest

Navigating through a JavaScript object array within another object

Guide to sending an array to a Node.js web service using AngularJS

Developing a Typescript module, the dependent module is searching for an import within the local directory but encounters an issue - the module cannot be found and

Update the knockout values prior to submitting them to the server

Once the AJAX callback is complete, the onblur event will revert back to the original field or the updated field

Do window.location.href and window.open interfere with each other?

What is the best way to combine two sections in html/css/bootstrap?

Steps to update the package version in package.json file

Exploring the world of lighting and shadows in WebGL and Three.js

"Troubleshooting issues with Material Design components in AngularJS: Why is <md-select> not functioning correctly

How can I successfully implement the Add To Calendar Button Package?

Implementing recursive functionality in a React component responsible for rendering a dynamic form

Loading pages asynchronously using Ajax with added interactivity through custom JavaScript scripts

Can the swap operation be carried out using web3.js and a forked HardHat implementation?