Google Maps API not working, showing only display after resizing or refreshing the page?
Resize event doesn't work for me.
Basically only the gray box is loaded initially, only when I refresh or resize the browser, which then loads completely.
The code I'm using is below for maps:
<script>
function initMap() {
var center1 = {
lat: 51.258426,
lng: -1.361344
};
var londoneye = {
lat: 51.503331,
lng: -0.119543
};
var bigben = {
lat: 51.500726,
lng: -0.124629
};
var tower = {
lat: 51.508139,
lng: -0.075939
};
var ss = {
lat: 51.449164,
lng: -2.608417
};
var windsor = {
lat: 51.483907,
lng: -0.604435
};
var stone = {
lat: 51.178895,
lng: -1.826215
};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: center1
});
var map1 = new google.maps.Map(document.getElementById('map1'), {
zoom: 14,
center: londoneye
});
var map2 = new google.maps.Map(document.getElementById('map2'), {
zoom: 14,
center: bigben
});
var map3 = new google.maps.Map(document.getElementById('map3'), {
zoom: 14,
center: tower
});
var map4 = new google.maps.Map(document.getElementById('map4'), {
zoom: 14,
center: ss
});
var map5 = new google.maps.Map(document.getElementById('map5'), {
zoom: 14,
center: windsor
});
var map6 = new google.maps.Map(document.getElementById('map6'), {
zoom: 14,
center: stone
});
var boundary = new google.maps.Map(document.getElementById('boundary'), {
zoom: 8,
center: center1
});
var cityCircle = new google.maps.Circle({
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.1,
map: boundary,
center: center1,
radius: 100000
});
var marker1 = new google.maps.Marker({
position: londoneye,
map: map
});
var marker12 = new google.maps.Marker({
position: londoneye,
map: map1
});
var marker2 = new google.maps.Marker({
position: bigben,
map: map
});
var marker22 = new google.maps.Marker({
position: bigben,
map: map2
});
var marker3 = new google.maps.Marker({
position: tower,
map: map
});
var marker32 = new google.maps.Marker({
position: tower,
map: map3
});
var marker4 = new google.maps.Marker({
position: ss,
map: map
});
var marker42 = new google.maps.Marker({
position: ss,
map: map4
});
var marker5 = new google.maps.Marker({
position: windsor,
map: map
});
var marker52 = new google.maps.Marker({
position: windsor,
map: map5
});
var marker6 = new google.maps.Marker({
position: stone,
map: map
});
var marker62 = new google.maps.Marker({
position: stone,
map: map6
});
var marker1content = '<b><font color="black">London Eye</font></b>'
var marker2content = '<b><font color="black">Big Ben</font></b>'
var marker3content = '<b><font color="black">Tower of London</font></b>'
var marker4content = '<b><font color="black">SS Great Brtain</font></b>'
var marker5content = '<b><font color="black">Windsor Castle</font></b>'
var marker6content = '<b><font color="black">Stonehenge</font></b>'
var infowindow1 = new google.maps.InfoWindow({
content: marker1content
});
var infowindow2 = new google.maps.InfoWindow({
content: marker2content
});
var infowindow3 = new google.maps.InfoWindow({
content: marker3content
});
var infowindow4 = new google.maps.InfoWindow({
content: marker4content
});
var infowindow5 = new google.maps.InfoWindow({
content: marker5content
});
var infowindow6 = new google.maps.InfoWindow({
content: marker6content
});
marker1.addListener('click', function() {
infowindow1.open(map, marker1);
});
marker2.addListener('click', function() {
infowindow2.open(map, marker2);
});
marker3.addListener('click', function() {
infowindow3.open(map, marker3);
});
marker4.addListener('click', function() {
infowindow4.open(map, marker4);
});
marker5.addListener('click', function() {
infowindow5.open(map, marker5);
});
marker6.addListener('click', function() {
infowindow6.open(map, marker6);
});
}
</script>
I looked through the browser console and there were no errors.
As I said, I also tried the resize function as mentioned in all other similar threads.
Edit: I also added the CSS below as requested, each id corresponds to a div.
#map {
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map1{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map2{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map3{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map4{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map5{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#map6{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
#boundary{
height: 400px;
width: 100%;
margin: 0 auto;
margin-top: 10%;
}
+3
source to share
3 answers
I tested too much and found out that it depends on some other script that stops the map from showing as well as other renders.
This is probably a script that uses the window.resize method and the problem is solved if you remove the custom script size (ie: Bootstrap or theme js script resizing)
The workaround I found is to run window resize
after loading the map, for example:
var upd = setInterval(function(){
window.dispatchEvent(new Event('resize'));
clearInterval(upd)
}, 2000)
+2
source to share
I took your javascript and css; used my own api key and html layout and all the maps loaded just fine. I would recommend that you put alert / console.log in your initMap function to make sure you get into that function call.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
/*Your CSS Here*/
/*#map {
}
...*/
</style>
<script type="text/javascript">
//initMap function Here
//function initMap() {
// //Code
//}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[API-Key-No-Brackets]&callback=initMap"> //Add Your API Key
</script>
</head>
<body>
<div id="map"></div>
<div id="map1"></div>
<div id="map2"></div>
<div id="map3"></div>
<div id="map4"></div>
<div id="map5"></div>
<div id="map6"></div>
<div id="boundary"></div>
</body>
</html>
0
source to share