Question

I’m just getting started with the google maps API and I feel like I’m reinventing the wheel.

I want to embed a map that starts off centered on the location of the office. On the side of the map are two boxes: “From:” and “To:” The “To:” is already filled in with the office’s address. When the user enters an address and hits “OK”, the embedded map updates to show a driving route. Below, the generated driving directions are displayed.

I know that google offers a really basic embedded map, but it’s not suitable for a professional site, in my opinion. I am definitely prepared (if necessary) to write the code by hand. I just have to believe that this problem has been solved a million times before.

Thanks!

Answer 1

Stuart’s links were very helpful, but were still lacking in a concrete useful tool. I had to merge a few of them together, along with some things I found on the web to create the map I was going for.

Here’s a javascript file that accomplishes what I was trying to do.

var resizable = false;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var mapCanvas;
var mouseX, mouseY, drawnX, drawnY, diffX, diffY;
var directionsShowing = false;
var officeMarker;

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    mapCanvas = document.getElementById("map");
    document.onmousemove = watchMouse;

    var officeLocation = new google.maps.LatLng(<Lat>, <Long>);
    var latlng = officeLocation;
    var mapOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    setupResizeBar(map);

    var markerOptions = {
        position: officeLocation,
        title: "Title"
    }

    officeMarker = new google.maps.Marker(markerOptions);
    officeMarker.setMap(map);   

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

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);
            directionsShowing = true;
            officeMarker.setVisible(false);
        } else {
            directionsShowing = false;
        }
    });
}

function setupResizeBar(map) {

    resizeButton = document.createElement("div");
    resizeButton.style.position = "absolute";
    resizeButton.style.bottom = "0px";
    resizeButton.style.height = "8px";
    resizeButton.style.zIndex = "9999999";
    resizeButton.style.width = "100%";
    resizeButton.style.backgroundImage = "url('/images/resize.gif')";
    resizeButton.style.backgroundRepeat = "repeat";
    resizeButton.style.cursor = "n-resize";

    resizeButton.onmousedown = function() { 
        resizable = true; 
        return false; 
    }
    document.onmouseup = function() {
        google.maps.event.trigger(map, 'resize');
        resizable = false; 
    }

    //mapCanvas = document.getElementById("map");
    mapCanvas.appendChild(resizeButton);

    return resizeButton;
}

function reverseRoute () {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    document.getElementById("start").value = end;
    document.getElementById("end").value = start;
    if( directionsShowing ) {
        calcRoute();
    }
}

function watchMouse(e) {
    var sx = window.scrollX || document.documentElement.scrollLeft || 0;
    var sy = window.scrollY || document.documentElement.scrollTop || 0;

    if(!e) e = window.event; // IEs event definition
    mouseX = e.clientX + sx;
    mouseY = e.clientY + sy;

    var deltaX = mouseX - diffX;
    var deltaY = mouseY - diffY;

    diffX = mouseX;
    diffY = mouseY;

    if(resizable) changeMapSize(deltaY);

    return false;
}

function changeMapSize(dy) {

    //var mapCanvas = document.getElementById("map");
    var height =  parseInt(mapCanvas.style.height);
    if(height < 150) { height = 150; }

    mapCanvas.style.height= (height + dy) + "px";
    // Continuously check resize
    //
}