Alex Man Alex Man - 5 months ago 40
Javascript Question

removing default mouseover tooltip from marker in google-maps

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

enter image description here

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);

Answer

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.mb.target.removeAttribute('title');

JSFiddle Link