Search code examples
javascriptgoogle-mapsgoogle-maps-api-3tooltip

Add Tooltip on a data.feature object like we can do for the marker


I work on a Google maps API project and I want to show tooltips when the pointer is hovering over the features. It's very easy when you work with markers : you just need to feed a "title" in the marker's options (see this exemple) but I work with data.feature object and I don't find how to do this?

I would continue to work why data.feature objects because it's easier to manage differents layers.

function elemOver(event){
    console.log(event.feature.getProperty("Libelle")); // I put a console.log to test the listener but I don't know how to do to add a tooltip
};

function elemOut(event){
    console.log (event.feature.getProperty("Libelle")," out"); // I put a console.log to test the listener but I don't know how to do to add a tooltip
};

data = new google.maps.Data();
data.loadGeoJson('layer.geojson');
data.setMap(map);
data.addListener('mouseover',elemOver);
data.addListener('mouseout',elemOut);

You can see my work here : http://bescu.github.io/GoogleMapsApiTest/

Thank you,

Maxime


Solution

  • Use setStyle with a function as argument:

    When you use it with a function as argument you be able to set a style(e.g. title) based on a property of the feature(e.g. Libelle)

       map.data.setStyle(function(feature){
        return {
          title:feature.getProperty('Libelle')||null
          //more styles    
        };
     });
    

    Demo: http://jsfiddle.net/doktormolle/L58aprhf/