I have created an application for showing an Information Window popup for markers, The application is working fine and the popup is showing correctly but the only solution is that along with the custom Information Window popup when under mouse-over, default popup with html tag is showing like as shown below.

JSFiddle

Can anyone please tell me some solution for this

My code is as given below

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

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

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

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

        infowindow.setContent(marker.title);
        infowindow.open(map, marker);        
    }.bind(this)); 

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

        infowindow.close();
    }.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('<div>Test1<br>Test5</div>', 55, 11),
        new point('Test2', 56, 12),
        new point('Test3', 57, 13)])

};
function addPoint() {
    console.log(viewModel.points().length);
    for (var i = 0; i < viewModel.points().length; i++)
    {
        console.log(i);
        console.log(viewModel.points().marker.title);
    }
    viewModel.points.push(new point('a', 58, 14));
}

ko.applyBindings(viewModel);

I have created an application for showing an Information Window popup for markers, The application is working fine and the popup is showing correctly but the only solution is that along with the custom Information Window popup when under mouse-over, default popup with html tag is showing like as shown below.

JSFiddle

Can anyone please tell me some solution for this

My code is as given below

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

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

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

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

        infowindow.setContent(marker.title);
        infowindow.open(map, marker);        
    }.bind(this)); 

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

        infowindow.close();
    }.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('<div>Test1<br>Test5</div>', 55, 11),
        new point('Test2', 56, 12),
        new point('Test3', 57, 13)])

};
function addPoint() {
    console.log(viewModel.points().length);
    for (var i = 0; i < viewModel.points().length; i++)
    {
        console.log(i);
        console.log(viewModel.points().marker.title);
    }
    viewModel.points.push(new point('a', 58, 14));
}

ko.applyBindings(viewModel);

• javascript
• google-maps-api-3
• tooltip
• google-maps-markers

Share Improve this question Follow asked Jan 17, 2015 at 15:32 Alex ManAlex Man 4,8861919 gold badges105105 silver badges188188 bronze badges 2

• 2 Why don't you simply create/use another property than title for your markers? – MrUpsidown Commented Jan 18, 2015 at 17:22
• Yeah, using another property is the way to go! – Apollo Data Commented Apr 4, 2017 at 23:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You could manually remove the element title attribute on mouseover.

Try changing

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

To

google.maps.event.addListener(marker, 'mouseover', function (e) {
    e.ya.target.removeAttribute('title');

Also for Edge, you need to be change it to:

e.ya.target.parentElement.removeAttribute('title')

JSFiddle Link (Google Maps API not working)

It appears that the title of your marker is set to the html content of your pop up window. When you create the marker object, give it a title attribute of what you would like to be displayed (i.e. name of your location...)

var marker = new google.maps.Marker({
  position: whateverpositionyouset,
  title: whatevertitleyouwant,
  map: map
})

I have been taking advantage of this thread in working on almost the same problem. I am able to get the Google Maps API to properly display European accented glyphs in the pop-up display when a marker is clicked, but the same encoded text string is not properly rendered on mouseover.

So, after looking at the helpful code example in JSFiddle, and not being able to use that suggested technique for removing the 'title' text, it finally became clear to me what MrUpsidown was suggesting when he thought we might just change the name of the property being displayed as a title. I did not realize that the definition of the reserved property 'title' was "text to be displayed on hover." So, the simplest solution is to use a property such as 'myTitle' in the Marker options list. When there is no title property, hovering bees a non-event.