Austin Practice Map

by freedawirl

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true&quot;"></script>
<div id="map-canvas"></div>
9ab4d6

CSS

#map-canvas {
        height: 500px;
        margin: 0px;
        padding: 0px;
}

JavaScript

var map;
var austin = new google.maps.LatLng(30.267153, -97.743061);

function initialize() {

  ///Optional Map Styles
    /*
    var roadAtlasStyles = [
    {
      featureType: 'road.highway',
      elementType: 'geometry',
      stylers: [
          //Blue
        { hue: '#9ab4d6' },
        { saturation: -50 },
        { lightness: 30 }
      ]
    },{
      featureType: 'road.arterial',
      elementType: 'all',
      stylers: [
        { hue: '#2200ff' },
        { lightness: -20 },
        { visibility: 'simplified' },
        { saturation: 30 }
      ]
    },{
      featureType: 'road.local',
      elementType: 'all',
      stylers: [
        { hue: '#f6ff00' },
        { saturation: 50 },
        { gamma: 0.7 },
        { visibility: 'simplified' }
      ]
    },{
      featureType: 'water',
      elementType: 'geometry',
      stylers: [
        { saturation: 40 },
        { lightness: 40 }
      ]
    },{
      featureType: 'road.highway',
      elementType: 'labels',
      stylers: [
        { visibility: 'on' },
        { saturation: 98 }
      ]
    },{
      featureType: 'administrative.locality',
      elementType: 'labels',
      stylers: [
        { hue: '#0022ff' },
        { saturation: 50 },
        { lightness: -10 },
        { gamma: 0.90 }
      ]
    },{
      featureType: 'transit.line',
      elementType: 'geometry',
      stylers: [
        { hue: '#ff0000' },
        { visibility: 'on' },
        { lightness: -70 }
      ]
    }
  ];
*/
  var mapOptions = {
    zoom: 12,
    center: austin,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
    }
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var styledMapOptions = {
    name: 'US Road Atlas'
  };

  var usRoadMapType = new google.maps.StyledMapType(
      roadAtlasStyles, styledMapOptions);

  map.mapTypes.set('usroadatlas', usRoadMapType);
 ...