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!

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

Josh Hart
Josh Hart
2,138 Points
Posted by Josh Hart
Josh Hart
2,138 Points

Google Maps API - Markers InfoWindow

I followed the Google maps API videos and created a map that plots markers using my own locations.

I'm now trying to modify the infoWindow popup to display content that is within a tag with a class of div class="artist"> rather than the demo's example of the <address> but not having much luck so far.

Any suggestion on modifying the following would be greatly appreciated:

function addMarkerToMap(location, address) {
    var image = "/images/jazzclub.png";
    var marker = new google.maps.Marker({
        map: map,
        position: location,
        icon: image});
    bounds.extend(location);
    map.fitBounds(bounds);


    var infoWindow = new google.maps.InfoWindow({
        content: address
    })
    google.maps.event.addListener(marker, "click", function () {
//            infoWindow.setContent("Place holder...");
        infoWindow.open(map, marker);
    })
    google.maps.event.addListener(marker, "mouseout", function() {
        infoWindow.close();
    });
}
initialize();

//    $(".artist").each(function() { var $artistname = $(this); });

$("address").each(function () {
    var $address = $(this);
    geocoder.geocode({address: $address.text()}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) addMarkerToMap(
            results[0].geometry.location, $address.text());
    })
});
google.maps.event.addDomListener(map, "idle", function () {
    center = map.getCenter();
});
$(window).resize(function () {
    map.setCenter(center);
});

</script>

1 Answer

Matt West
Matt West
14,545 Points
Matt West
Matt West
14,545 Points

Changing

$("address").each(function () { ...

to

$(".artist").each(function () { ...

Should get you on your way.

You're using .artist here because you want to get elements with the class artist. The period just means that you are matching a class name not the tag name.

If you're still stuck please post your HTML code as well and I'll get it sorted :)