Question

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&v=2&key=abcdefg&sensor=false'></script>
<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

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