Having two info windows on one page? (beginner question)

[Daniel M. Sheehan]

This is probably a very newbie question, but I'm modifying code from Gabriel Svennerberg's book to have two videos in clickable info windows on one map. Essentially, I tried naming the 2nd infoWindow infoWindow2 and can't seem to get the code to work properly. The functionality that I'm looking for is to be able to have multiple points on a map that when you click them, they show a youtube video. 

Thanks,
Danny

 

(function() {

  // Defining variables that need to be available to some functions

  var map, infoWindow;

  window.onload = function() {

    // Creating a map

    var options = {  

      zoom: 13,

      center: new google.maps.LatLng(40.7725, -73.970278),  

      mapTypeId: google.maps.MapTypeId.ROADMAP  

    };  

    

    map = new google.maps.Map(document.getElementById('map'), options);

    // Adding a marker

    var marker = new google.maps.Marker({

      position: new google.maps.LatLng(40.7725, -73.970278),

      map: map,

      title: 'Click me'

    });

    google.maps.event.addListener(marker, 'click', function() {

    

      // Check to see if an InfoWindow already exists

      if (!infoWindow) {

        infoWindow = new google.maps.InfoWindow();

      }

      

      // Creating the content  

      var content = '<div id="info">' +

        '<iframe width="330" height="300" src="http://www.youtube.com/embed/8WfGbQSU9ac" frameborder="0" allowfullscreen></iframe>' +

        '</div>';

      

      // Setting the content of the InfoWindow

      infoWindow.setContent(content);

      

      // Opening the InfoWindow

      infoWindow.open(map, marker);

    

    });

    

    // Triggering the click event

    google.maps.event.trigger(marker, 'click');

// Adding 2nd MARKER

    var marker = new google.maps.Marker({

      position: new google.maps.LatLng(40.720469,-73.949887),

      map: map,

      title: 'Click me'

    });

    google.maps.event.addListener(marker, 'click', function() {

    

      // Check to see if an InfoWindow already exists

      if (!infoWindow2) {

        infoWindow2 = new google.maps.InfoWindow();

      }

      

      // Creating the content  

      var content = '<div id="info">' +

        '<iframe width="330" height="300" src="http://www.youtube.com/embed/8WfGbQSU9ac" frameborder="0" allowfullscreen></iframe>' +

        '</div>';

      

      // Setting the content of the InfoWindow

      infoWindow2.setContent(content);

      

      // Opening the InfoWindow

      infoWindow2.open(map, marker);

    

    });

    

    // Triggering the click event

    google.maps.event.trigger(marker, 'click');

    

  };

  

})();

[Chris Broadfoot]

You're probably getting a ReferenceError on the line

if (!infoWindow2)....

because infoWindow2 does not exist. This can be fixed by adding a "var infoWindow2".

Alternatively, change the if statement to if (typeof infoWindow2 == 'undefined')

Cheers

Chris

--

http://twitter.com/broady

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/O1EP81EPNyUJ.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[Daniel M. Sheehan]

Thanks!

On Sep 26, 9:43 pm, Chris Broadfoot <c...@google.com> wrote:
> You're probably getting a ReferenceError on the line
>
> if (!infoWindow2)....
>
> because infoWindow2 does not exist. This can be fixed by adding a "var
> infoWindow2".
>
> Alternatively, change the if statement to if (typeof infoWindow2 ==
> 'undefined')
>
> Cheers
> Chris
>

> --http://twitter.com/broady