Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Half grey google map while dynamically creating it for more then once with javascript live function

Our code starts with live function and whole page content is created by js live function,below code used for creating google maps within javascript code, for the first creation everything is fine (map seems correctly on screen) but after that time when google map is created again at the same page half of the map comes up and half is grey, that is our problem.

JQuery version 1.8.0

Bootstrap version 2.2.2

var idz = 'mapg';
tr.append($('<td>').append($('<div>', {
'id': idz,
'style': 'width: 100%; height: 300px'
})));
var latlng = new google.maps.LatLng(40.988921, 29.021326);
var options = {
   zoom: 10,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};
rootMap = new google.maps.Map(document.getElementById(idz), options);

google map problem screen

I would appreciate any help with this issue, thanks in advance.

like image 647
odincer Avatar asked Aug 30 '13 12:08

odincer


People also ask

Why does Google Maps go GREY?

Sometimes when you scroll across a Google Map screen you'll see blocks of grey. Usually this occurs when the map is set to satellite view and the application struggles to load the data fast enough. However, sometimes this phenomenon occurs in map view if Google doesn't have access to the right data.

What are Maploads Google Maps?

How are map loads counted on the Google Maps Platform? A single map load is charged when any of the following occur: A web page or application displays a map using the Maps JavaScript API. An application requests a single map image from the Maps Static API.

Can I add a polygon to Google Maps?

Draw a path or polygonTo make a path or polygon into a 3D object, click Altitude. A "New Path" or "New Polygon" dialog will pop up. You may need to move it out of the way before moving on to the next step. To draw the line or shape you want, click a start point on the map and drag.


1 Answers

I too had the same problem, I solved it by triggering the resize of Google maps.

Here is the below code:

google.maps.event.trigger(rootMap , 'resize'); //For v3

Add this after initializing the Google maps.

You can take a look at this SO Question.

like image 124
Praveen Avatar answered Oct 13 '22 11:10

Praveen