Google Maps

by davidpett

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<input type="button" value="toggle assembly overlay" id="toggleAssemblyBtn"/>
<input type="button" value="toggle transit overlay" id="toggleTransitBtn"/>
<div id="map_canvas" class="gmap border_box"></div>

CSS

.gmap {
    width:100%;
    height:1000px;
    border: 1px solid #4D2722;
}
.border_box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

var assemblyLayer = null,
    transitLayer = null,
    map = null,
    assemblyLayerIsOn = false,
    transitLayerIsOn = false;

function initialize() {
    var myLatlng = new google.maps.LatLng(32.824552,-117.108978);
    var myOptions = {
      zoom: 6,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    assemblyLayer = new google.maps.KmlLayer('http://cachetest.digitaria.com/viz_20110728_q2_ad_finaldraft_kmz.kmz');
    transitLayer = new google.maps.TransitLayer();
}

function toggleAssemblyOverlay() {
    if (assemblyLayerIsOn) {
        assemblyLayer.setMap(null);
        assemblyLayerIsOn = false;
    } else {
        assemblyLayer.setMap(map);
        assemblyLayerIsOn = true;
    }
}

function toggleTransitOverlay() {
    if(transitLayerIsOn) {
        transitLayerIsOn = false;
        transitLayer.setMap(null);
    } else {
        transitLayer.setMap(map);
        transitLayerIsOn = true;
    }
}

$(function(){
    $('#toggleAssemblyBtn').click(function(e) {
        toggleAssemblyOverlay();
    });
    $('#toggleTransitBtn').click(function(e) {
        toggleTransitOverlay();
    });
   initialize(); 
});