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>
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.
Our community of experts have been thoroughly vetted for their expertise and industry experience.
The Distinguished Expert awards are presented to the top veteran and rookie experts to earn the most points in the top 50 topics.