troubleshooting Question
Need help revising Google Maps Geocoding JavaScript example so that it displays multiple different addresses / locations on the map
egoselfaxis asked 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
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>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 2 Comments.
Learn from the best
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.