Link to home
Create AccountLog in
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

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of egoselfaxis
egoselfaxis

ASKER

Thank you sir!  It's working wonderfully!

Cheers,
- Yvan