Google Maps Multiple JSON Overlays With Same SetStyle Function

Question

I have multiple JSON overlay files - Area 1 through 5.

//AREA 1//        
  map.data.loadGeoJson('https://api.myjson.com/bins/myw18');
//AREA 2//  
  map.data.loadGeoJson('https://api.myjson.com/bins/nkbn0');
//AREA 3//  
  map.data.loadGeoJson('https://api.myjson.com/bins/cwnws');
//AREA 4//  
  map.data.loadGeoJson('https://api.myjson.com/bins/106pnw');
//AREA 5//  
  map.data.loadGeoJson('https://api.myjson.com/bins/7lwmk');

I want to be able to control the visibility of the overlays using the radio button menu.

Also I want for each of the overlays to preserve the map.data functionality (set style property, infoWindow, etc)

I've tried setting each overlay as a variable and adding an if else statement to toggle the visibility but it is not working.

I am assuming that instead of one variable an array has to handle var area1 through var area5 and that array has to be equal to map.data

Below is the code where the JSON has the functionality that I want, but I am unable to turn on/off the overlays.

// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
//

When the map loads I want only the Area1 to be visible since that radio option is checked by default.

I want Area 1 to have the color and when I click on it for an infoWindow to open up

When I choose another radio, Area4 for example, I want Area1 to become invisible and Area4 to become visible and also have the same functionality as Area1.

geocodezip · Accepted Answer

One option is to create named functions for styling and handling click and mouse over events. Assign those to all of the data layers

function createArea(url) { // create an "area" from its URL and assign all the event listeners
  var area = new google.maps.Data();
  area.loadGeoJson(url);
  area.setStyle(styleFunc);
  area.addListener('click', clickFunc);
  area.addListener('mouseover', mouseFunc);
  return area;
}

function clickFunc(event) { // handle layer clicks
  this.revertStyle();
  this.overrideStyle(event.feature, {
    strokeWeight: 2,
    strokeColor: 'black',
    zIndex: 1
  });

  var CDNAME = event.feature.getProperty('CDNAME');
  var COLOR = event.feature.getProperty('COLOR');

  infoWindow.setPosition(event.latLng);
  infoWindow.setOptions({
    pixelOffset: {
      width: 0,
      height: -3
    }
  });

  infoWindow.setContent(
    "CDNAME: " + CDNAME + "
" +
    "COLOR: " + COLOR + ""
  );
  infoWindow.open(map);
}

function mouseFunc(event) {  // handle layer mouse over events
  this.revertStyle();
  this.overrideStyle(event.feature, {
    strokeWeight: 2,
    strokeColor: 'black',
    zIndex: 1
  });
}

proof of concept fiddle

code snippet:

function initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 52.656963,
      lng: -112.506664
    },
    gestureHandling: 'greedy',
    mapTypeControl: false
  });

  var area1 = createArea('https://api.myjson.com/bins/myw18');
  var area2 = createArea('https://api.myjson.com/bins/nkbn0');
  var area3 = createArea('https://api.myjson.com/bins/cwnws');
  var area4 = createArea('https://api.myjson.com/bins/106pnw');
  var area5 = createArea('https://api.myjson.com/bins/7lwmk');

  function styleFunc(feature) {
    return {
      fillColor: feature.getProperty('COLOR'),
      strokeWeight: 1,
      strokeColor: 'black',
      fillOpacity: 0.4,
      strokeOpacity: 0.7,
      zIndex: 0
    };
  }

  // Infowindow
  var infoWindow = new google.maps.InfoWindow({
    zIndex: 2
  });
  map.addListener('click', function() {
    area1.revertStyle();
    area2.revertStyle();
    area3.revertStyle();
    area4.revertStyle();
    area5.revertStyle();
    infoWindow.close();
  })

  function clickFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });

    var CDNAME = event.feature.getProperty('CDNAME');
    var COLOR = event.feature.getProperty('COLOR');

    infoWindow.setPosition(event.latLng);
    infoWindow.setOptions({
      pixelOffset: {
        width: 0,
        height: -3
      }
    });

    infoWindow.setContent(
      "CDNAME: " + CDNAME + "
" +
      "COLOR: " + COLOR + ""
    );
    infoWindow.open(map);
  }


  function mouseFunc(event) {
    this.revertStyle();
    this.overrideStyle(event.feature, {
      strokeWeight: 2,
      strokeColor: 'black',
      zIndex: 1
    });
  }

  function createArea(url) {
    var area = new google.maps.Data();
    area.loadGeoJson(url);
    area.setStyle(styleFunc);
    area.addListener('click', clickFunc);
    area.addListener('mouseover', mouseFunc);
    return area;
  }

  setArea();

  function setArea() {
    infoWindow.close();
    area1.setMap(document.getElementById('area1').checked ? map : null);
    area2.setMap(document.getElementById('area2').checked ? map : null);
    area3.setMap(document.getElementById('area3').checked ? map : null);
    area4.setMap(document.getElementById('area4').checked ? map : null);
    area5.setMap(document.getElementById('area5').checked ? map : null);
  }

  google.maps.event.addDomListener(document.getElementById('area1'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area2'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area3'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area4'), 'click', setArea);
  google.maps.event.addDomListener(document.getElementById('area5'), 'click', setArea);

}

#map {
  height: 90%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


  
    
    Area 1

    
    Area 2

    
    Area 3

    
    Area 4

    
    Area 5

Google Maps Multiple JSON Overlays With Same SetStyle Function

Answers (1)

Related Questions