CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
szpic
szpic

Reputation: 4498

InfoWindow showing in wrong place

I have little problem with my webpage. When I'm trying to show InfoWindow on marker. That windows shows on the top left corner of a map instead of on the marker. Just like in screen below: enter image description here

Here is my script I use for placing markers and using InfoWindows.

var infowindow;
function point(name, lat, long) {
    var self = this;
    self.name = name;
    self.lat = ko.observable(lat);
    self.long = ko.observable(long);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, long),
    title: name,
    map: map,
    draggable: true
});

//if you need the poition while dragging
google.maps.event.addListener(marker, 'drag', function () {
    var pos = marker.getPosition();
    this.lat(pos.lat());
    this.long(pos.lng());
}.bind(this));

//if you just need to update it when the user is done dragging
google.maps.event.addListener(marker, 'dragend', function () {
    var pos = marker.getPosition();
    this.lat(pos.lat());
    this.long(pos.lng());
}.bind(this));

google.maps.event.addListener(marker, 'mouseover', function () {
    infowindow = new google.maps.InfoWindow({ content: "empty" });
    console.log(marker.title);
    infowindow.setContent(marker.name);
    infowindow.open(map, marker);

}.bind(this));


}

var map = new google.maps.Map(document.getElementById('googleMap'), {
    zoom: 5,
    center: new google.maps.LatLng(55, 11),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var viewModel = {
    points: ko.observableArray([
        new point('Test1', 55, 11),
        new point('Test2', 56, 12),
        new point('Test3', 57, 13)])

};
function addPoint() {
    viewModel.points.push(new point('a', 58, 14));
}

ko.applyBindings(viewModel);

here all on jsfiddle: http://jsfiddle.net/24q8n/

Upvotes: 2

Views: 2832

Answers (2)

putvande
putvande

Reputation: 15213

You are using marker.name which is undefined. So you are assigning undefined to setContent what apparently stops the infoWindow from working and ends up in the top left corner. Remove infowindow.setContent(marker.name) or replace it with something that does have a value like marker.title. Or define marker.name when you define var marker = ...:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, long),
    title: name,
    name: name, // define the name so setContent(marker.name) will work.
    map: map,
    draggable: true
});

Or remove the line that creates the problem:

google.maps.event.addListener(marker, 'mouseover', function () {
    infowindow = new google.maps.InfoWindow({ content: "empty" });
    console.log(marker.title);
    // This line gives you the problem because marker.name is undefined.
    // infowindow.setContent(marker.name);
    infowindow.open(map, marker);    
}.bind(this));

Upvotes: 4

MrUpsidown
MrUpsidown

Reputation: 22488

http://jsfiddle.net/upsidown/24q8n/1/

Here is a working version of it.

Usually, an info window is a single object that you show and hide with updated content. What you are doing is recreating the InfoWindow object in your mouseover listener.

Instead of that, just define it outside your functions:

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

and then just do:

infowindow.setContent(marker.title);
infowindow.open(map, marker);

Upvotes: 2

Related Questions