I want to load the maps.googleapis if the user clicks on a view that contains a map, so I have code to load the api with a callback parameter:
<script type="text/javascript">
$('div[data-role="page"]').bind('pagecreate', function () {
var script = document.createElement("script");
script.id = "addedformaps";
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap";
document.body.appendChild(script);
});
The initMap function references item in the google.maps object, such as:
<script type="text/javascript">
function initMap() {
var mapType = google.maps.MapTypeId.ROADMAP;
The first time the view is loaded, I get an error because google.maps.MapTypeId is undefined. Subsequent loads work, until the browser cach is cleared, and then the error occurs again. I am able to get around this by adding a SetTimeout to the initMap function:
<script type="text/javascript">
setTimeout(function initMap() {
...
}, 500)
</script>
but I am not comfortable with slowing down every load. Why is the callback function executing before the google.maps object is fully loaded?