InfoWindow not showing above Marker Google Maps JavaScript API v3

Question

So I have created a jsFiddle demonstrating my issue: http://jsfiddle.net/6vpc2/1/ Hover over the marker in my jsFiddle to see InfoWindow placement.

I have a GoogleMap "object" the creates Google Maps. After creating a Google Map like so:

  var mapOptions = {
    zoom: 8, // The initial zoom level when your map loads (0-20)
    minZoom: 6, // Minimum zoom level allowed (0-20)
    maxZoom: 17, // Maximum soom level allowed (0-20)
    zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
    },
    //center: location, // Centre the Map to our coordinates variable
    mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
    scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
    // All of the below are set to true by default, so simply remove if set to true:
    panControl: false, // Set to false to disable
    mapTypeControl: false, // Disable Map/Satellite switch
    scaleControl: false, // Set to false to hide scale
    streetViewControl: false, // Set to disable to hide street view
    overviewMapControl: false, // Set to false to remove overview control
    rotateControl: false // Set to false to disable rotate control
}

if (this.instances.length > 0) {
    return this.instances.pop();
}

var googleMap = new GoogleMap();
googleMap.map = new google.maps.Map(googleMap.mapCanvas, mapOptions);
return googleMap;

I then set a var in a JS "object" to the returned googleMap value.

Then I use this.map, which is the returned googleMap from the above code, to set a marker on the map:

 this.latitude = latitude;
this.longitude = longitude;

var location = new google.maps.LatLng(latitude, longitude);

var infowindow = new google.maps.InfoWindow({
    content: placeMarkerContent
});

this.marker = new google.maps.Marker({
    position: location,
    map: this.map,
});

this.map.setCenter(location);

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

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

The problem is the InfoWindow does not show above the Marker, see my jsFiddle: http://jsfiddle.net/6vpc2/1/ Hover over the marker in my jsFiddle to see InfoWindow placement.

this.marker is undefined when you are using it in the mouseover listener. Inside the click listener function, "this" is the marker. fiddle — geocodezip
You rock man! You exactly right, just changed this.marker to this and all is well — Brian Ogden

geocodezip geocodezip · Accepted Answer · 2014-06-27T11:43:50

this.marker is undefined when you are using it in the mouseover listener. Inside the click listener function, "this" is the marker.

google.maps.event.addListener(this.marker, 'mouseover', function () {
    infowindow.open(this.getMap(), this);
});

fiddle

InfoWindow not showing above Marker Google Maps JavaScript API v3

1 Answers