0

I would like load more than one GeoJSON file to Google Maps and style each one independently. I found the following question but have not been able to get the solution to work. interact with geojson layers independently in google maps api v3

  function initMap() {

    //Initialize 2 varibles that will take GeoJson files and Load the GeoJson files for each layer
    var alt1row = new google.maps.Data();
    alt1row.loadGeoJson('https://45d0ae3907069179bbd918ae873676bebbe0427a.googledrive.com/host/0B8EzS0XcloQzRFdPeWFIUGVLZlk/ALT_1_ROW.geojson')

    var alt2row = new google.maps.Data();
    alt2row.loadGeoJson('https://45d0ae3907069179bbd918ae873676bebbe0427a.googledrive.com/host/0B8EzS0XcloQzRFdPeWFIUGVLZlk/ALT_2_ROW.geojson');


    //Set the style for each layer
    alt1row.setStyle({
        strokeColor: 'red',
        strokeWeight: .5
    });

    alt2row.setStyle({
        strokeColor: 'blue',
        strokeWeight: .5
    });

    //Set the layers to the map
    alt1row.setMap(map);
    alt2row.setMap(map);

    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 35.333851, lng: -77.555105},
      zoom: 10
    });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR API KEY&libraries=drawing&callback=initMap"
async defer></script>

Community
  • 1
  • 1
M. Hogan
  • 9
  • 1
  • What issue are you having with the solution posted in the [linked question](http://stackoverflow.com/questions/24275265/interact-with-geojson-layers-independently-in-google-maps-api-v3) (why is this not a duplicate of it)? – geocodezip Jul 18 '16 at 20:03
  • As you said, "I found the following question but have not been able to get the solution to work". Are you encountering any error message? please expound your statement and discuss your issues. For the meantime, you may check the documentation [how to load GeoJSON](https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson) – Android Enthusiast Jul 19 '16 at 12:19
  • I am not getting any error message. The google map displays but the data from my GeoJson files does not draw on the map. I am very new to JS and this may be the problem. – M. Hogan Jul 19 '16 at 14:13
  • I was able to get everything to work. Not sure what was going on but I restarted from scratch and everything is working. – M. Hogan Jul 19 '16 at 17:25

1 Answers1

1

I have worked on the same problem ( i had to color polygons in different colors). I solved that by updating my geojson files, adding the color property to my files. I think the code will be more clear :

GeoJSon file:

     {"type":"Feature","properties":{
     "color":"red"},"geometry":{"type": "MultiPolygon","coordinates":[[[[....]]]]
     {"type":"Feature","properties":{"color":"red"},"geometry"
     :{"type": "MultiPolygon","coordinates":[[[[ ....

my page html:

     var countries = ['germany','moldova','italy','spain','france'];


    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.TERRAIN ,
      styles: styles
    });  

    for (var country in countries){
        map.data.loadGeoJson('http://grp-map.equant.com/GoogleMaps/'+countries[country]+'.geojson');
    }
    map.data.setStyle(function(feature) {

        var k = feature.getProperty('color');
        return {
            fillColor:k,
            strokeWeight:1,
            clickable: false
        }
    });

I hope this will help you.

Florian
  • 19
  • 5