Question

I want the user to press a button, where AJAX load will load Google Maps. I have several questions. First, where do I put the script API key. In the original file or the AJAX file? Second, I’m not sure what to write to load the google maps event initializer. Here is the code.

First File

<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false&libraries=drawing">
</script>

<div id="themapsection">

<input type="button" id="tour_dates" Value="Show Tour Dates" />

<script type="text/javascript" >

$(document).ready(function() {
  $('#tour_dates').click(function () {
  var theid = <?php echo $user_id; ?>;  
  $('#map_canvas').load(
  'ajax_map_tour_data.php', 
  {session_user_id: theid},
  function() {  google.maps.event.addDomListener(window, 'load', initialize)})
;});});

</script>

</div>

<div id="map_canvas"></div>

In the ajax file I have already created the function initialize. I decided to take this piece of code below from the ajax file and attach it to the original file but I know this isn’t right. I just don’t know where to go from here.

  google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

Try calling the initialize function at the ajax load (success) event

$(document).ready(function() {
  $('#tour_dates').click(function () {
    var theid = <?php echo $user_id; ?>;  
    $('#map_canvas').load(
      'ajax_map_tour_data.php', 
      {session_user_id: theid},
      initialize
    );
  });
});