Plural Tutorial Map-API v01

by freedawirl

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div>
    <button id="btnTerrain">Terrain</button>
    <button id="btnRoadmap">Roadmap</button>
    <button id="btnSatellite">Satellite</button>
    <button id="btnHybrid">Hybrid</button>
</div>
<div>
    <input id="address" type="textbox" value="Knighton, Powys" style="width:300px;">
    <input type="button" value="Geocode" onclick="geocodeAddress()">
</div>
<div>
	<input id="start" type="textbox" value="" style="width:300px;">
	<input type="button" value="Get Route" onclick="calcRoute()">
</div>
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div>
<div id="map"></div>
<div id="coordsDiv"></div>

CSS

#map {
        height: 500px; border:1px solid red;
    width:100%;
    }
	
	#coordsDiv {
		position: absolute;
		background-color:white;
		border:1px solid black;
		bottom: 50px;
		right: 50px;
		height: 50px;
		width: 380px;
		padding-top: 5px;
		padding-left: 5px;
	}

JavaScript

var map;
var initialCenter;
var initialZoom;
var elevationService;
var geocoder;

function init() {
    var mapOptions = {
        center: new google.maps.LatLng(30.4, -97.75),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        mapTypeControl: false
    };
	
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
	
	initialCenter = mapOptions.center;
	initialZoom = mapOptions.zoom;
	
    addButtons();
    addGroundOverlay();
    addMarkers();
    addPolyline();
    addEditablePolygon();
    addDraggableRectangle();
    addCircle();
    addKmlLayer();
	addGeoJSONDataLayer();
    addElevationService();
    addGeocodingService();
	addGoToInitialExtent();
	addShowCoords();
}
google.maps.event.addDomListener(window, "load", init);

function addButtons() {
    document.getElementById('btnTerrain').addEventListener('click', function () {
        map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
    });
    document.getElementById('btnHybrid').addEventListener('click', function () {
        map.setMapTypeId(google.maps.MapTypeId.HYBRID);
    });
    document.getElementById('btnRoadmap').addEventListener('click', function () {
        map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
    });
    document.getElementById('btnSatellite').addEventListener('click', function () {
        map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
    });
}

function addGroundOverlay() {
    // south-west and north-east corners
    var imageBounds = new google.maps.LatLngBounds(
            new google.maps.LatLng(53.178521, -3.438549),
            new google.maps.LatLng(53.194979, -3.390613));
    var historicalOverlay = new google.maps.GroundOverlay(
            'http://localhost:8080/gmaps/images/denbigh.jpg',
            imageBounds);
    historicalOverlay.setMap(map);
}

function addMarkers() {

    var image = "images/walesflag.png";
    var centerMarker = new google.maps.Marker({
        icon: image,
        position: new...