Google Map API demo

Demo of google map api

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
<div id="panel"> <b>Start: </b>

    <input type="text" name="start" id="start" onchange="calcRoute();"> <b>End: </b>

    <input type="text" name="end" id="end" onchange="test();">
</div>
<div id="map-canvas"></div>

CSS

html {
    height: 100%
}
body {
    height: 100%;
    margin: 0;
    padding: 0
}
#map-canvas {
    width: 80%;
    height: 80%;
    margin: 0px;
    padding: 0px;
}
#panel {
    position: absolute;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
}

JavaScript

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(41.850033, -87.6500523);
    var mapOptions = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: chicago
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);

    var input = document.getElementById('start');
    var options = {
        componentRestrictions: {
            country: 'uk'
        }
    };
    new google.maps.places.Autocomplete(input, options);

    var input2 = document.getElementById('end');
    var options = {
        componentRestrictions: {
            country: 'uk'
        }
    };
    new google.maps.places.Autocomplete(input2, options);
}

function test() {
	map.panTo(new google.maps.LatLng( 35.6894875, 139.6917064));
}

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);