Simple Austin Practice Map

by freedawirl

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<button id="btnTerrain">Terrain</button>
<button id="btnRoadMap">Road Map</button>
<button id="btnSatellite">Satellite</button>
<button id="btnHybrid">Hybrid</button>
<div id="map-canvas"></div>
<div id="coordsDiv"></div>

CSS

#map-canvas {
    height: 500px;
    margin: 0px;
    padding: 0px;
}
#coordsDiv {
    position:absolute;
    background:white;
    border:1px solid #444;
    right:50px;
    bottom:50px;
    height:50px;
    width:300px;
    padding:10px;
    font-size:12px;
    font-family:helvetica;
}

JavaScript

function initialize() {

var mapOptions = {
center: new google.maps.LatLng(30.267153, -97.743061),
zoom: 10,
    disableDefaultUI:true,
    zoomControl:true,
    panControl:true,
    scaleControl:true,
    streetViewControl:true,
    rotateControl:true,
    overviewMapControl:true,
    mapTypeControl:true
};
mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
        }
  
var initialCenter = mapOptions.center;
var initialZoom = mapOptions.zoom;
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    addShowCoords(map);
    addGoToInitialExtent(map, initialCenter, initialZoom);
    drawMarkers(map, initialCenter, initialZoom);
    addButtons(map);
}

function addButtons(map){
    document.getElementById('btnTerrain').addEventListner('click',function(){map.setMapTypeID(google.maps.MapTypeId.Terrain);
});
    
     document.getElementById('btnRoadMap').addEventListner('click',function(){map.setMapTypeID(google.maps.MapTypeId.RoadMap);
});

 document.getElementById('btnSatellite').addEventListner('click',function(){map.setMapTypeID(google.maps.MapTypeId.Satellite);
});

 document.getElementById('btnHybrid').addEventListner('click',function(){map.setMapTypeID(google.maps.MapTypeId.Hybrid);
});
    
    
}
google.maps.event.addDomListener(window, 'load', initialize);
function addShowCoords(map) {
    google.maps.event.addListener(map, 'center_changed',

    function () {
        var newCenter = map.getCenter();
        var zoom = map.getZoom();
        document.getElementById('coordsDiv').innerHTML = "Center: " + newCenter.toString() + "<br>Zoom: " + zoom; });

}

function addGoToInitiialExtent(map, initialCenter, initialZoom){


};