Load google maps to div loaded by ajax - php

Question

I'm using jquery ajax to get some results from a php script that is parsing an xml document. After that ajax call i whant to show a map from google api, in a div created by that php script (that's my problem).
Is it possible to load the maps API to the <div id="map-canvas"> that is created in php, after the ajax call??
PHP FILE
... $xmlData = simplexml_load_file("using an http service");
echo "<div id='map-canvas'></div>"; //LOAD MAPP HERE!
echo "<ul>";
foreach($xmlData->StopTimes->StopTime as $stopTime){
echo "<li>",$stopTime->attributes()->Hour,"</li>";
}
echo "</ul>";
}
AJAX FILE
...
//station click, show next stops
$('.station_link').click(function(){
var station_text = $(this).text();
$.ajax({ //make the ajax call
type: "POST", //use POST/GET
url: "../server_side/nextStop.php", //file to send data
data: {poststation : station_text}, //postlink -> php($_POST) value / text -> jquery var value
success: function(data){ //on success, do something
$('#next_stop').html(data);
$('#next_stop').show();
//Google maps API
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
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=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}
loadScript();
}
});
});
});
This is what i've tried (and much more :p), but i dont even know if its just wrong.
Any help or advise would be appreciated!
-- UPDATE --
As simple as this:
javascript file
//station click, show next stops
$('.station_link').click(function(){
var station_text = $(this).text();
$.ajax({ //make the ajax call
type: "POST", //use POST/GET
url: "../server_side/nextStop.php", //file to send data
data: {poststation : station_text}, //postlink -> php($_POST) value / text -> jquery var value
success: function(data){ //on success, do something
$('#next_stop').html(data);
$('#next_stop').show();
// Google maps API
var mapOptions = {
center: new google.maps.LatLng(37.7831,-122.4039),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
});
});
});
And just adding this <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> to the HTML file.
That's what i whanted, it´s loading the <div id="map-canvas"> as it should.
Ty for help anyway!
Sorry if i didn't proove my point earlier, i'm a bit newbie ;)

Answer 1

Google Maps must be loaded at the time you call center: new google.maps.LatLng(-34.397, 150.644),, so from my opinion you should create a dummy map and initialize it on page load
<div id="dummy"></div>
<script type="text/javascript">
function initGoogle(){
myLatLng = new google.maps.LatLng(0,0);
var mapOptions = {
zoom: 1,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('dummy'), mapOptions);
}
$(document).ready(function(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.id = 'googleMaps';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initGoogle';
document.body.appendChild(script);
});
</script>
<style type="text/css">
#dummy { position: absolute; top: -5000px; left: -5000px; }
</style>
then you can bind whatever you want.
Note: I used jQuery's $(document).ready(), but if you don't use jQuery you can figure it out.

Answer 2

I suspect your initialize isn't getting called due to scope issues as it's only defined in the scope of the Ajax callback and not the global scope, which the Maps SDK will expect.
If you have to load the Google Maps JS asynchronously, use jQuery.getScript() and then initialise your map in getScript's callback.
It could be better though as you're effectively chaining two requests, which is not particularly performant.
You could:
Create a global variable set to 0
Fire off your Ajax call for the Maps div
Use getScript to load the Maps SDK asynchronously and concurrently
In the callback function of your Ajax and getScript calls, increment a global variable you just set
Have a loop that runs every 50ms or so (recursively calling setTimeout, for example), checking the value of the variable you set, waiting until it is equal to 2, set the timeout for another 50ms or so to check again
Once the condition above is satisfied, initialize your map as you know that both the div and maps API have loaded

Answer 3

You can call a js function after AJAX call. You probably better define the function of initialization of gmaps somewhere outside of AJAX call and then after a successful call to your php script call you gmap function (in case of high need with setTimeout('gmap()', 2000); function). But as I see your script it first creates div and then calls function of gmap