codeigniter load googlemaps on ajax gives empty map_canvas - ajax

Question

i'm displaying a google maps in codeigniter and this works all fine.
But i'm using the same code in an ajax call, but than it outputs an empty map_canvas, so i don't see anything..
public function googlemapsAjax()
{
echo "
<script type='text/javascript'>
$.getScript('/assets/js/admin.js');
</script>
";
$this->load->library('googlemaps');
$config['center'] = '50.850340, 4.351710';
$config['zoom'] = '6';
$config['places'] = TRUE;
$config['placesAutocompleteInputID'] = 'location';
$config['placesAutocompleteBoundsMap'] = TRUE; // set results biased towards the maps viewport
$config['placesAutocompleteOnChange'] = '
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("location").value;
geocoder.geocode({ "address": address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if(typeof marker != "undefined"){marker.setMap(null)};
$("#location").parent().removeClass("has-error");
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
$("#latitude").val(latitude);
$("#longitude").val(longitude);
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(latitude, longitude)
});
map.setCenter(new google.maps.LatLng(latitude, longitude), 16);
map.setZoom(16);
google.maps.event.addListener(marker, "dragend", function (event) {
latitude = this.getPosition().lat();
longitude = this.getPosition().lng();
$("#latitude").val(latitude);
$("#longitude").val(longitude);
});
} else {
alert("Request failed.")
$("#location").parent().addClass("has-error");
}
});
';
$this->googlemaps->initialize($config);
$data['map'] = $this->googlemaps->create_map();
$this->load->view('admin/ajax/view_googlemaps_ajax', $data);
}
And in my view i have
echo $map['js'];
and
echo $map['html'];
Anyone knows why i have no output in map_canvas?
While it works perfectly if i don't do it over ajax..

Answer 1

#jen_vdp - Thanks for using my library. I've taken a look and believe the issue is to do with how the map is called/initialized.
If you revert back to the non-ajax version and view the page source, you will see that the map is initialized through the following code:
google.maps.event.addDomListener(window, "load", initialize_map);
Obviously, if you load the map via AJAX, the window is already loaded, and therefore, I don't 'think' this will get executed.
My suggestion would be to manually call the JS function initialize_map() on the success callback of your AJAX request.
That's the only thing I can think that it might be at this time. Do let me know if you continue to experience issues and I'll investigate further.
Thanks,
Steve