CODEWITHSUNDEEP
jqueryajaxgoogle-mapsgoogle-maps-api-3infowindow
holden
holden

Reputation: 13591

google map info window with ajax v3

I've almost got it, but it doesn't quite work. I'm trying to load the content via ajax, and it does load the correct content, I can see it loading in firebug however, it gives me an error: infowindow not defined. I've got something out of place with load_content

The two commented out lines before load_content work to load a little window with some text.

function initialize() {
  var myLatlng = new google.maps.LatLng(<%= @location_for_map.average(:lat) %>, <%= @location_for_map.average(:lng) %>);
  var myOptions = {
   zoom: 13,
   center: myLatlng,
   mapTypeControl: false,
   navigationControl: true,
   navigationControlOptions: {
    style: google.maps.NavigationControlStyle.SMALL
   },
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  //var infowindow = new google.maps.InfoWindow();

  setMarkers(map, places);

 }

 function setMarkers(map, locations) {
   // Add markers to the map

  for (var i = 0; i < locations.length; i++) {
      var place = locations[i];
      var myLatLng = new google.maps.LatLng(place.lat, place.lng);
      var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: '/images/google_maps/numbers/'+(i+1)+'.png',
    html: place.name,
    id: place.id,
          title: place.name
      });

   var infowindow = new google.maps.InfoWindow();

   google.maps.event.addListener(marker, 'click', function() {
     //infowindow.setContent(this.html);
     //infowindow.open(map,this);
     load_content(marker, this.id);

   });
  }
 }

 function load_content(marker, id){
   $.ajax({
     url: '/places/' + id + '.js',
     success: function(data){

       infowindow.setContent(data);
       infowindow.open(map, marker);
     }
   });
 } 

 function loadScript() {
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
     document.body.appendChild(script);
 }

Upvotes: 1

Views: 6687

Answers (3)

holden
holden

Reputation: 13591

This works:

function setMarkers(map, locations) {
  // Add markers to the map

    for (var i = 0; i < locations.length; i++) {
        var place = locations[i];
        var myLatLng = new google.maps.LatLng(place.lat, place.lng);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: '/images/google_maps/numbers/'+(i+1)+'.png',
            html: place.name,
            id: place.id,
            title: place.name
        });

        var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(marker, 'click', function() {
          load_content(map,this,infowindow);      
        });
    }
}

function load_content(map,marker,infowindow){
  $.ajax({
    url: '/places/' + marker.id + '.js',
    success: function(data){
      infowindow.setContent(data);
      infowindow.open(map, marker);
    }
  });
}

Upvotes: 3

Michael Cho
Michael Cho

Reputation: 746

Move this line: 

var infowindow = new google.maps.InfoWindow();

to be outside any function, eg just after function initialize(){}

Upvotes: 0

Nigel
Nigel

Reputation: 1715

Your infowindow declaration has scope only inside the function. Try declaring the infowindow variable with global scope. I believe that's what's causing the 'infowindow not defined' problem.

Upvotes: 0

Related Questions