Need help revising Google Maps Geocoding JavaScript example so that it displays multiple different addresses / locations on the map

egoselfaxis
egoselfaxis used Ask the Experts™
on
I have a working Google Maps API code example that plots a single location on a map based on an address.  However, .. I need to somehow adapt it so that it plots MULTIPLE different locations on the map (again based on the address).  How would I revise the code example below to achieve something like that?  I'd be open to loading the multiple different addresses from an Array or JSON object if it's easier.  My working code example is below.

Thanks,
- Yvan

<!DOCTYPE html>
<html>
<head>
    <style>
        #myMap {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="myMap"></div>
<script>
    var googleMaps = {
        mapLoad: function (address, mapDiv) {
            var mapOptions = {
                zoom: 20,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                disableDefaultUI: true,
                gestureHandling: 'none',
                zoomControl: false
            };
            var map = new google.maps.Map(mapDiv, mapOptions);
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == 'OK') {
                    console.log(results);
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Unable to connect to Google Maps');
                }
            });
        }
    }
    var initMap = function() {    
        googleMaps.mapLoad("555 Pennsylvania Avenue NW Washington, DC 20500", document.getElementById("myMap"));        
    }  
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap"></script>
</body>
</html>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Multitechnician
Top Expert 2014
Commented: 
<!DOCTYPE html>
<html>
<head>
    <style>
        #myMap {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="myMap"></div>
<script>
    var googleMaps = {
        map: null,
        mapLoad: function (address) {
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == 'OK') {
                    console.log(results);
                    googleMaps.map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: googleMaps.map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Unable to connect to Google Maps');
                }
            });
        }
    }
    var initMap = function() {
        var mapOptions = {
            zoom: 18,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            disableDefaultUI: true,
            gestureHandling: 'none',
            zoomControl: false
        };
        googleMaps.map = new google.maps.Map(document.getElementById("myMap"), mapOptions);
        googleMaps.mapLoad("555 Pennsylvania Avenue NW Washington, DC 20500");
        googleMaps.mapLoad("700 Pennsylvania Ave NW, Washington, DC 20408");
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>&callback=initMap"></script>
</body>
</html>

Open in new window


two markers
egoselfaxis

Author

Commented:
Thank you sir!  It's working wonderfully!

Cheers,
- Yvan

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial