Avatar of egoselfaxis
egoselfaxis
 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

GoogleJavaScriptJSON

Avatar of undefined
Last Comment
egoselfaxis

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
leakim971

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
egoselfaxis

ASKER
Thank you sir!  It's working wonderfully!

Cheers,
- Yvan
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck