Google maps : pan to a center of a geojson route clicking on it

Question

i´m new in google maps and after reading here and there I can´t make this work.

I´m doing a google map where Im showing bike forest routes using geojson ( linestring type, are given by coordinates points).

"type": "Feature", "properties": { "name": "larouco", "color":"red" }, "geometry": { "type": "LineString", "coordinates": [ [ -7.634432, 41.955357, 981.6 ], [ -7.635379, 41.954641, 896.1 ], [ -7.635824, 41.953955, 900.9 ] ................ ] }

All fine at the moment.

I need to pan the map to the center of the road when you clicks it.

map.data.loadGeoJson('http://myroutes.json');

map.data.setStyle(function(feature) {
    var color = feature.getProperty('color');

    return {
        strokeColor: color,
        strokeWeight: 3
    };
});

map.data.addListener('mouseover', function(event) {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
    map.data.revertStyle();
});

here is where the problems starts

map.data.addListener('click', function(event) {

  var center_rute = getCenter(new google.maps.LatLngBounds());
  map.panTo(center_container);

        //map.setZoom(13);

});

Thinks that LatLngBounds is the way but i´m running in circles...

Thanks, Jul

Dr.Molle Dr.Molle · Accepted Answer · 2014-09-21T19:46:02

You must access the geometry of the feature and create the LatLngBounds on your own by iterating over the points of the path(geometry)

Google maps : pan to a center of a geojson route clicking on it

1 Answers