Загрузите карты google в div, загруженные ajax

Я использую jquery ajax, чтобы получить некоторые результаты из php-скрипта, который анализирует XML-документ. После этого ajax-вызова я хочу показать карту из google api, в div, созданном этим скриптом php ( это моя проблема ).

Можно ли загрузить API карт в <div id="map-canvas"> который создается в php, после вызова ajax?

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

• Использование карт Google в качестве фона?
• Радиус статической карты Google для увеличения
• Google сопоставляет маркеры с javascript и PHP
• Как выбрать долготу, широту вокруг определения местоположения от mysql?
• responseText работает, но responseXML всегда имеет значение null

 ... //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(); } }); }); }); 

Это то, что я пробовал (и многое другое: p), но я даже не знаю, просто ли это неправильно.

Любая помощь или совет будет оценена!

— ОБНОВИТЬ —

Проще всего это:

Файл javascript

 //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); } }); }); }); 

И просто добавив этот <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> в файл HTML.

Это то, что я написал, он загружает <div id="map-canvas"> как и должно.

Ты за помощь! Извините, если раньше я не пробовал мой вопрос, я немного новичок;)

 <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>