I'm facing an issue with implementing two Google maps on a single page where the second map seems to be malfunctioning.
Below is the code I am currently using:
<style>
#map-london {
width: 500px;
height: 400px;
}
#map-belgium {
width: 500px;
height: 400px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(51.518865,-0.133108);
var mapOptions = {
zoom: 17,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-london'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Incopro London'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script>
function initializeB() {
var myLatlngBel = new google.maps.LatLng(50.802138,-1.07839);
var mapOptionsBel = {
zoom: 17,
center: myLatlngBel,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapB = new google.maps.Map(document.getElementById('map-belgium'), mapOptionsBel);
var markerB = new google.maps.Marker({
position: myLatlngBel,
map: mapB,
title: 'Incopro Belgium'
});
}
google.maps.event.addDomListener(window, 'load', initializeB);
</script>
To display the maps, I have utilized two div elements:
<div id="map-london"></div>
<div id="map-belgium"></div>
If anyone has any insights on how this can be resolved, please provide your input.
Thank you in advance.