Skip to content

Instantly share code, notes, and snippets.

Last active July 27, 2023 22:24
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save zross/9893056 to your computer and use it in GitHub Desktop.
Save zross/9893056 to your computer and use it in GitHub Desktop.
Using geojson with Google Maps API
Display the source blob
Display the rendered blob
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<title>Data Layer: Styling</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
#legend-container {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
#legend-container h3 {
margin-top: 0;
.legend-color-box {
border:1px solid black;
<script src=""></script>
<script src=""></script>
var map,
colorValues = [
"red", //1
"blue", //2
"green", //3
"brown", //4
"purple", //5
"pink" //6
invertedColorValues = [
"pink", //1
"purple", //2
"brown", //3
"green", //4
"blue", //5
infoWindow = new google.maps.InfoWindow({
content: ""
google.maps.event.addDomListener(window, 'load', function initialize() {
//create the map
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 6,
center: {lat: 37.5, lng: -119.0},
scrollwheel: false
// Load GeoJSON.
var promise = $.getJSON("california_nad83_zones_min.geojson"); //same as;
cachedGeoJson = data; //save the geojson in case we want to update its values,{idPropertyName:"id"});
//style fucntions
var setColorStyleFn = function(feature) {
return {
fillColor: colorValues[feature.getProperty('value')],
strokeWeight: 1
//an inverted style fn
setInvertedColorStyleFn = function(feature) {
return {
fillColor: invertedColorValues[feature.getProperty('value')],
strokeWeight: 1
// Set the stroke width, and fill color for each polygon, with default colors at first;
//get the legend container, create a legend, add a legend renderer fn
var $legendContainer = $('#legend-container'),
$legend = $('<div id="legend">').appendTo($legendContainer),
renderLegend = function(colorValuesArray){
$.each(colorValuesArray,function(index, val){
var $div = $('<div style="height:25px;">').append($('<div class="legend-color-box">').css({
})).append($("<span>").css("lineHeight","23px").html("Zone " + index));
//make a legend for the first time
//make a toggle button for color values
var $toggleColorsButton = $("<button>").html("Toggle Colors").click(function(){
if( === setColorStyleFn){;
} else {;
//add it to the legend
//add the legend to the map
//listen for click events'click', function(event) {
//show an infowindow on click
infoWindow.setContent('<div style="line-height:1.35;overflow:hidden;white-space:nowrap;"> Feature id = '+
event.feature.getId() +"<br/>Feature Value = Zone " + event.feature.getProperty("value") + "</div>");
var anchor = new google.maps.MVCObject();
<div id="map-canvas"></div>
<div id="legend-container"><h3>Legend</h3></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment