Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Stephen DelBuono
Stephen DelBuono
11,264 Points

Adding info windows 3/3

Ive been stuck for days can somebody help me out? my code,

  var infoWindow = new google.maps.InfoWindow({content: "Magic Kingdom"});
  google.maps.event.addListener(marker, "click", function(){
  infoWindow.open(map, marker);
  })
    }
}

)

Bummer! In the event listener's anonymous function, you need to call 'infoWindow.open()' passing in 'theMap' and 'marker' as arguments

11 Answers

fmquaglia
fmquaglia
11,060 Points
fmquaglia
fmquaglia
11,060 Points

like this:

var mapOptions = {
    center: new google.maps.LatLng(28.42, -81.58),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
};

var mapElement = document.getElementById("map");
var theMap = new google.maps.Map(mapElement, mapOptions);
var markers = new Array();

var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();

var geocoderOptions = {address: "Magic Kingdom, Disney World"};

var markerImage;
var infoWindow;

geocoder.geocode(
    geocoderOptions,
    function(results, status) {
        if(status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({map: theMap, position: results[0].geometry.location});
            markers.push(marker);
            bounds.extend(results[0].geometry.location);
            theMap.fitBounds(bounds);
      infoWindow = new google.maps.InfoWindow({'content': 'Magic Kingdom'});
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.open(theMap, marker);
      });
        }
    }
);
fmquaglia
fmquaglia
11,060 Points
fmquaglia
fmquaglia
11,060 Points

Hi Stephen,

I',m not familiar with google maps API, but could you add the error message (if any) or any other symptom?

Looking at your code what strikes my eye at first glance is that is incomplete:

 var infoWindow = new google.maps.InfoWindow({content:   "Magic   Kingdom"});
 google.maps.event.addListener(marker, "click", function(){
    infoWindow.open(map, marker);
}); //<---- the provided code was missing the close of the callback function context (the right curly brace) and the right parenthesis.
Stephen DelBuono
Stephen DelBuono
11,264 Points
Stephen DelBuono
Stephen DelBuono
11,264 Points

Hi Fabricio, thanks for your response.

I added the closing tags. they are added from previous code challenges.

fmquaglia
fmquaglia
11,060 Points
fmquaglia
fmquaglia
11,060 Points

Thanks Stephen. What about marker and map definitions? Could you add the code in full, please?

Stephen DelBuono
Stephen DelBuono
11,264 Points
Stephen DelBuono
Stephen DelBuono
11,264 Points

here's my codepen

http://codepen.io/AcesUp/pen/spnrl

fmquaglia
fmquaglia
11,060 Points
fmquaglia
fmquaglia
11,060 Points

All set. Thanks, Stephen. Here,

var mapOptions = {
    center: new google.maps.LatLng(28.42, -81.58),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
};

var mapElement = document.getElementById("map");
var theMap = new google.maps.Map(mapElement, mapOptions); // (*1) <---- defined here
var markers = new Array();

var geocoder = new google.maps.Geocoder();
var bounds = new google.maps.LatLngBounds();

var geocoderOptions = {address: "Magic Kingdom, Disney World"};

var markerImage;
var infoWindow;

geocoder.geocode(
    geocoderOptions,
    function(results, status) {
        if(status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({map: theMap, position: results[0].geometry.location});
            markers.push(marker);
            bounds.extend(results[0].geometry.location);
            theMap.fitBounds(bounds);
      infoWindow = new google.maps.InfoWindow({'content': 'Magic Kingdom'});
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.open(theMap, marker); // <------------- here, it was theMap variables (see *1)
      });
        }
    }
);

Hope it helps. :-)

Stephen DelBuono
Stephen DelBuono
11,264 Points
Stephen DelBuono
Stephen DelBuono
11,264 Points

Thanks, yes that looks like it should work, unfortunately it does not let me pass the code challenge. I do appreciate your help.

fmquaglia
fmquaglia
11,060 Points
fmquaglia
fmquaglia
11,060 Points

It's funny, I did earn the 12 points of the code challenge. Just in case remove the code comments I added. May be they're puzzling the challenge parser.

Stephen DelBuono
Stephen DelBuono
11,264 Points
Stephen DelBuono
Stephen DelBuono
11,264 Points

Wow it worked!!! Thanks a lot!!!

fmquaglia
fmquaglia
11,060 Points

I'm glad to hear so Stephen DelBuono :-)

I forked and revised your codepen: http://codepen.io/fmquaglia/pen/zIKhb Too, late! ;-)

Cheers!

Stephen DelBuono
Stephen DelBuono
11,264 Points
Stephen DelBuono
Stephen DelBuono
11,264 Points

I think I was missing a semi-colon... I was switching (map, marker), and (theMap, marker) aw well. glad to pass that with your help.

Cheers! Enjoy your day!

fmquaglia
fmquaglia
11,060 Points
fmquaglia
fmquaglia
11,060 Points

:-) Thanks!