Google Maps API and Javascript and $(document).ready(function()

Question

I am trying to implement google maps functionality and need to figure out where in my code the following script should be located:

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

function initialize() {
    var myLatLng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);

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

}

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:

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

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() ??

Does anyone have any ideas for me?

The google maps part need not to be inside $(document{.ready(function(), skip it for the rest of jquery also — nbk
– nbk, Commented Nov 10, 2011 at 6:03

duncan · Accepted Answer · 2011-11-10 08:55:28Z

2

You shouldn't need to to put your google maps stuff int document.ready . You're already registering an event listener on the window.load which calls initialize(), so that should be enough. Move it all out of document.ready. I can't guarantee that's what's causing the problems with your ajax though.

answered Nov 10, 2011 at 8:55

duncan

32k15 gold badges83 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Google Maps API and Javascript and $(document).ready(function()

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related