Google Maps API Loading Issue

Question

I'm asynchronously loading the Google Maps API via an AJAX call and I'm getting no error son screen and the Google API code is outputting correctly and I have valid lat/lng coords., I'm using the below code, can anyone suggest any ideas as to what is going on?

<script type="text/javascript">
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng({lat}, {lng}),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}           
function loadScript()
{
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key={api_key}&sensor=false&callback=initialize";
    document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<div id="map-canvas" class="map-canvas"></div>

This calls for basic debugging. Have you looked in the JavaScript console? Are the functions ever fired? What does `map` contain? Where are you calling `initialize()`? — Pekka, Nov 10 '13 at 01:20
@Pekka웃, The whole code snippet above is loaded in via an ajax call and the map-canvas loads and the javascript associated, there are no errors. I'm using firebug and it's saying that there is no calls to the google api when it's loaded into the page :S — llanato, Nov 10 '13 at 01:24
One thing that seems broken is the `.` concatenating the string parts in `loadScript()` instead of `+`. But those should throw errors. — Pekka, Nov 10 '13 at 01:25
@Pekka웃, the . is a PHP variable, I've changed the code to reflect this. — llanato, Nov 10 '13 at 01:31

score 3 · Answer 1 · answered Nov 10 '13 at 03:17

The whole code snippet above is loaded in via an ajax call

When you load the fragment via ajax, at the time when the response arrives usually the window has already been loaded, in this case the onload-event already has been fired(and will not fire again, loadScript will never be executed)

As commented by geocodezip your solution works because loadScript will be executed immediately, but when you want to be sure that the window has already been loaded, check the readyState-property of the document:

if(document.readyState==='complete'){
  loadScript();
}else{
  window.onload = loadScript;
}

score 1 · Accepted Answer · answered Nov 10 '13 at 01:55

1

Solved it, on the Google API documentation for asynchronously loading the map I used the code as it is on the page https://developers.google.com/maps/documentation/javascript/tutorial#asynch, the issue was I was using:

window.onload = loadScript;

When I should have been using:

window.onload = loadScript();

answered Nov 10 '13 at 01:55

llanato

2,508
6
37
59

2

That doesn't look correct. Adding the parentheses will execute the script immediately, rather than onload. – geocodezip Nov 10 '13 at 02:47
1

Yeah, this will fire straight away. – Pekka Nov 10 '13 at 15:43

score 0 · Answer 3 · answered Nov 10 '13 at 01:48

0

You need to provide an API key.

function loadScript()
{
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false&callback=initialize";
    script.src.replace('api_key', "3d73a8acf7ab7f466fb7c9da390df68c"); //  This is not a real api key
    document.body.appendChild(script);
}

answered Nov 10 '13 at 01:48

max

96,212
14
104
165

1

An API key is recommended, not _required_. – geocodezip Nov 10 '13 at 02:45
No sir, that is not the solution. – Adib Aroui Mar 21 '15 at 09:52

Google Maps API Loading Issue

3 Answers3

Linked