added several layers of geojson on google maps

Question

hello i have problem about adding mutiple geojson layer and display it in one map

image1

image2

at image 1 i use type 'MultiLineString' and at image 2 i use 'MultiPolygon' and I want to display both types into one map.

i use two different source

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.

Answer 1

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

Answer 2

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

var name_var= new google.maps.Data({map: map});
jalan.loadGeoJson('source_var');

var name_var2= new google.maps.Data({map: map});
air_bersih.loadGeoJson('source_var2');


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


  }