Geek Answers Handbook

Add a tooltip to the data.feature object, as we can do for the marker

I am working on a project of the Google Maps API, and I want to show hints when the pointer hovers over functions. It is very simple when you work with markers: you just need to provide a “header” in the marker options ( see this example), but I work with data.feature and I don’t find how to do it?

I would continue to work on why data.feature objects, because it’s easier to manage different 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.imtqy.com/GoogleMapsApiTest/

Thank,

Maxim

+4
source share
2

setStyle :

, (, title) (, Libelle)

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

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

+3

title , , .

InfoWindow, , :

    map.data.addListener('click', function (event) {
    if (areaInfoWindow != null) {
        areaInfoWindow.close();
        areaInfoWindow = null;
    }
    areaInfoWindow = new google.maps.InfoWindow({
        content: event.feature.getProperty('name'),
        position: event.latLng
    });
    areaInfoWindow.open(map);
});

, mouseover mouseout , , ...

, InfoWindow, - HTML - DIV? - .

+2

More articles:


All Articles