hello i have problem about adding mutiple geojson layer and display it in one map
at image 1 i use type 'MultiLineString' and at image 2 i use 'MultiPolygon' and I want to display both types into one map.
at this moment my code can only display one
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -2.9365327, lng: 104.4950964}
});
var infowindow = new google.maps.InfoWindow();
map.data.loadGeoJson('<?= base_url(); ?>/asset/mapgeojson/newjson.geojson');
var ced = google.maps.event.addListener(map.data, 'click', function(event) {
var aab=event.feature.f;
infowindow.setContent('<div class="col-md-12"><div class="row"><div class="col-md-12"><table class="table table-striped"><tr><th>ID</th><td>'+aab+'</td></tr><tr><th>Latitude</th><td>'+ event.latLng.lat()+'</td></tr><tr><th>Longitude</th><td>'+ event.latLng.lng()+'</td></tr></table></div></div><div class="row"><div class="col-md-12"><button type="button" class="btn btn-info col-md-12" data-toggle="modal" data-target="#myModal'+aab+'">Detail</button></div></div></div>');
console.log(event.feature.f)
infowindow.setPosition(event.latLng);
infowindow.open(map);
});
map.data.addListener('mouseover', function (event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {
strokeColor: 'red',
strokeWeight: 8
});
});
map.data.addListener('mouseout', function (event) {
map.data.revertStyle();
});
}
maybe someone can help me?
edited: i found my own answer so i'll give the results here
as you can see I added several layers of geojson from different links into one.
because no one answered my question, so I found my own answers from various references. so simple just declare new layer and layer will be automatic display in same map
declare first
var name_foo_first = new google.maps.Data({map: map});
var name_foo_two = new google.maps.Data({map: map});
and provide the geojson data link that you saved.
name_foo_first.loadGeoJson('url_foo_first.geojson');
name_foo_two.loadGeoJson('url_foo_two.geojson');