Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
   html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
</style>
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>
<body>
  Large weather <input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked>
    <input type="button" id="layer1" onclick="toggleLayer(1)" value="Racks">
    Small weather <input type="checkbox" id="layer2" onclick="toggleLayer(2)" checked>
​
    <div id="map_canvas"></div>
</body>
</html>
 
    var geocoder;
    var map; 
    var marker;
    var layers = [];
​
  function initialize() {
    geocoder = new google.maps.Geocoder ();
    var latlng = new google.maps.LatLng (40.43, -74.00);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
        },
      map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
      marker = new google.maps.Marker({map:map});
​
      layers[0] = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/NY_Radar_data.kmz', {preserveViewport: true});
      layers[1] = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml', {preserveViewport: true});
      layers[2] = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/OKX_Radar_data%20(1).kmz', {preserveViewport: true});
    for (var i = 0; i < layers.length; i++) {
        layers[i].setMap(map);
      }
        }
    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
    }); 
    }
​
    function toggleLayer(i) {
      if(layers[i].getMap() === null) {
        layers[i].setMap(map);
      }
      else {
        layers[i].setMap(null);
      }
    }
      google.maps.event.addDomListener(window, 'load', initialize);
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers