Jquery: Loading GoogleMaps by Ajax gives blank screen

Question

Hello, I am using Jquery to get googlemap data and load it into a div. My googlemap comes from the MVCMaps control which is located on a usercontrol. My code is as follows:

$.get('<%= Url.Action("GetMapHtml", "Post") %>', function(data) {
     $('#MapWndCont').html(data);
});

My controller method:

 public ActionResult GetMapHtml()
 {
     return PartialView("MapHtml", null);
 }

After the AJAX call completes and the data is received, as seen below (which is correct and shows up properly when shown static:

<h3>Google Map</h3>
<div id="divG4158336" class="GoogleMap"></div><script type='text/javascript' src='/WebResource.axd?d=rgm3O6ZOAFRTPnYXcBL7BZMf7PKdndsbCMbyc33Gins1&t=633980535391370000'></script>
<script type='text/javascript' src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&amp;sensor=false'&gt;&lt;/script&gt;
<script type='text/javascript' src='/WebResource.axd?d=rgm3O6ZOAFRTPnYXcBL7BbNjHCL588M7IBh7laWKeqs1&t=633980535391370000'></script>
<script type='text/javascript'>
var G4158336 = null;$(function(){G4158336=new MvcMaps.GoogleMap('divG4158336',{id:'G4158336',lat:39.9097362345372,lng:-97.470703125,zoom:4,maptype:G_NORMAL_MAP});});</script>

After that is received and placed inside the #MapWndCont container. The following occurs:

These are 2 more GET requests that are made from scripts loaded from the google map. The moment they are fired, my page goes blank and nothing at all shows up. The body element is also removed. In the image where you see the second ajax call. After that, the whole page is wiped of html and scripts. So scripts after that call is being executed and they cannot be found.

All help is appreciated in correcting this and having my google maps dynamically loaded.

Thanks,

EDIT: I have been told by BinaryKitten on #JQuery chat on freenode. document.ready() was in the data of the ajax call. Now my problem is removing that from the MVCMAPS control.

Answer 1

I’m probably missing something obvious, but your JavaScript console seems to be complaining that $ isn’t defined.

Are you definitely including jQuery on the page? E.g. does $('body') work in the console?

Answer 2

One way to solve the problem would be to use the Google-Maps version that doesnt use Javascript. (Static Api)

Answer 3

i have exactly the same problem, but without MVCMAPS control but on PHP

loading a Widget which holds a Google-Map and adds the script tag to the header results in a blank page - exactly as described above

can anybody help out?