asked on

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

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

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

egoselfaxis

ASKER

Thank you sir! It's working wonderfully!

Cheers,
- Yvan