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

egoselfaxisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented: 
<!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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
egoselfaxisAuthor Commented:
Thank you sir!  It's working wonderfully!

Cheers,
- Yvan
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Google

From novice to tech pro — start learning today.