title: Google Maps API and Javascript and $(document).ready(function()
body: <p>I am trying to implement google maps functionality and need to figure out where in my code the following script should be located:</p>
  
  <pre><code>google.maps.event.addDomListener(window, 'load', initialize);
  
  function initialize() {
      var myLatLng = new google.maps.LatLng(&lt;?php echo $latitude; ?&gt;, &lt;?php echo $longitude; ?&gt;);
  
  var myOptions = {
      zoom: 15,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      }
  map = new google.maps.Map(document.getElementById("map-canvas-1"),myOptions); 
  
  var myOptions2 = {
      zoom: 15,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.HYBRID
      }
  map2 = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions2);  
  
    var myOptions3 = {
      zoom: 15,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.SATELLITE
      }
    map3 = new google.maps.Map(document.getElementById("map-canvas-3"),myOptions3);  
  
    var marker = new google.maps.Marker({
    position: myLatLng, 
    map: map, 
    title:"Map1" }); 
  
    var marker = new google.maps.Marker({
    position: myLatLng, 
    map: map2, 
    title:"Map2" }); 
  
  
    var marker = new google.maps.Marker({
    position: myLatLng, 
    map: map3, 
    title:"Map3" }); 
  
    map3.getStreetView().setPosition(myLatLng);
    map3.getStreetView().setVisible(true);
  </code></pre>
  
  <p>}</p>
  
  <p>Currently, this code is inside the $(document{.ready(function(), and it seems to work fine, except that it causes the following jQuery/ajax functions to stop working:</p>
  
  <pre><code>jQuery.ajax({
      url: sURL + 'billingEventDetail/ajaxGetTaxClasses/',
      dataType: 'json',
      success: function(data) {
          taxClassData = data;
          jQuery.each(taxClassData.description , function(key, value){
              jQuery('#sel_tax_class').append(new Option(value, key));
          });
      }
  });
  
  jQuery.ajax({
      url: sURL + 'billingEventDetail/ajaxGetBillingEventDetails/',
      dataType: 'json',
      success: function(data) {
          taxQualifierData = data;
          jQuery.each(taxQualifierData.description , function(key, value){
              jQuery('#sel_tax_qualifier').append(new Option(value, key));
          });
      }
  });
  </code></pre>
  
  <p>When I temporarily disable the google maps code, the JQuery/Ajax starts working again.  Why am I having problems getting these two bits of code to work together?  Maybe the google maps code does not neet to be inside the $(document{.ready(function() ??</p>
  
  <p>Does anyone have any ideas for me?  </p>