Google Maps - Directions ex.

by gavinfoley

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id="map_canvas"></div>
<div id="directions"></div>

CSS

#map_canvas {height:500px; width:80%;}

JavaScript

var startLocation = null;
var endLocation = null;
var directionsRenderer = new google.maps.DirectionsRenderer();
var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});
var markersArray = [];
var directionsService = new google.maps.DirectionsService();
var map = null;

$(function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
    } else {
        error('not supported');
    }
});

function success(position) {
    loadStores(position.coords.latitude, position.coords.longitude, 15);
}

function error(msg) {
    loadStores(-41.29247, 174.7732, 13);

    var textToAppend = '';
    textToAppend += "<h2>Sorry!</h2>";
    textToAppend += "<a href=\"#\" onClick=\"hideDirections(); return false;\">";
    textToAppend += "<img id=\"closeDirections\" src=\"http://m.nzvenison.com/notion/site/deernz/images/nzvenisonmobile/close.gif\" />";
    textToAppend += "</a>";
    textToAppend += "<hr>";
    textToAppend += "<p>We could not find your current location.</p>";
    textToAppend += "<p>Please check your phone settings and make sure that location services are enabled to prevent seeing this message.</p>";

    updateDirections($('#directions'), textToAppend);
}

function loadStores(lat, lng, zoom) {
    var latlng = new google.maps.LatLng(lat, lng);

    var myOptions = {
        zoom: zoom,
        center: latlng,
        mapTypeControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.Normal
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    directionsRenderer.setMap(map);
    directionsRenderer.setPanel(document.getElementById('directionsPanel'));

    var iconShape = {
        coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19,...