CODEWITHSUNDEEP
javascriptgoogle-maps-api-3tooltipgoogle-maps-markers
Alex Man
Alex Man

Reputation: 4886

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

Upvotes: 4

Views: 8031

Answers (3)

scniro
scniro

Reputation: 16979

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)

Upvotes: 3

Menelik Tefera
Menelik Tefera

Reputation: 21

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

Upvotes: 1

Terry Corbet
Terry Corbet

Reputation: 1

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 becomes a non-event.

Upvotes: 0

Related Questions