Jesper
Jesper

Reputation: 129

I can't make the infoWindow work

I am new to JavaScript I have read the question: Google Maps JS API v3 - Simple Multiple Marker Example and tried the answer supplied by Daniel Vassallo

var Australia = new google.maps.LatLng(-27.16881, 132.72259);

var placesIhaveBeen = [
    ['Aalborg Airport Flight leaves at:xxxxxx', 57.04807, 9.91857]
    ['Copenhagen Airport Arrives leaves at:xxxxxx', 55.61541, 12.64885]
    ['Dubai Airport Flight Arrives at: xxxxx', 25.25278, 55.36444]
    ['Sydney Airport Flight Arrives at:xxxxxx', -33.93947, 151.17522]];

var markers = [];
var iterator = 0;
var map;
var infowindows = new google.maps.InfoWindow();
var marker, i;

function initialize()
{
    var mapOptions = {
        zoom: 4,
        center: Australia,
        mapTypeControl: false

    };
    map = new google.maps.Map(document.getElementById("googleMap-Canvas"),
        mapOptions);

    //flight path Polyline
    var flightPlanCoordinates = [
    new google.maps.LatLng(57.04807, 9.91857),
    new google.maps.LatLng(55.61541, 12.64885),
    new google.maps.LatLng(25.25278, 55.36444),
    new google.maps.LatLng(-33.93947, 151.17522)
    ];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);
    //end of flight path polyline

    for (i = 0; i < placesIhaveBeen.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(placesIhaveBeen[i][1], placesIhaveBeen[i][2], placesIhaveBeen[i][3], placesIhaveBeen[i][4]),
            map: map
        });

        google.maps.eve.addDomListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(placesIhaveBeen[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}

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

That is my entire Script :S

I know I have some flightpath in the middle of it, I want that to show as well - as the markers (placesIhaveBeen).

So the deal is I want the marker with infowindows and the polyline to show at the same time, but I can't make it work - please help :)

Upvotes: 0

Views: 48

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

You have several errors:

There are missing comma in array definition of placesIhaveBeen:

var placesIhaveBeen = [
    ['Aalborg Airport Flight leaves at:xxxxxx', 57.04807, 9.91857],
    ['Copenhagen Airport Arrives leaves at:xxxxxx', 55.61541, 12.64885],
    ['Dubai Airport Flight Arrives at: xxxxx', 25.25278, 55.36444],
    ['Sydney Airport Flight Arrives at:xxxxxx', -33.93947, 151.17522]
];

infowindow is not defined so the line

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

should be

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

And there is a typo in google.maps.eve.addDomListener. It should be google.maps.event.addDomListener.

See example at jsbin. Map containter is named differently.

Upvotes: 1

Related Questions