Карты Google: встроенный код для «направления» в офис?

Question

Я только начинаю работать с API карт Google, и мне кажется, что я заново изобретаю колесо.

Я хочу встроить карту, которая начинается с центра офиса. На боковой стороне карты есть два поля: «От:» и «Кому». «Кому:» уже заполнен адрес офиса. Когда пользователь вводит адрес и нажимает «ОК», встроенная карта обновляется, показывая маршрут движения. Ниже отображаются сгенерированные направления движения.

Я знаю, что Google предлагает действительно простую встроенную карту, но, на мой взгляд, она не подходит для профессионального сайта. Я определенно готов (при необходимости) написать код от руки. Я просто должен верить, что эта проблема была решена миллион раз прежде.

Спасибо!

Answer 1

Посмотрите этот пример и его исходный код в документации Google Maps - http://code.google.com/apis/maps/documentation/javascript/examples/directions-panel.html

Дополнительные примеры здесь - http://code.google.com/apis/maps/documentation/javascript/examples/

Answer 2

Ссылки Стюарта были очень полезны, но все еще не хватало конкретного полезного инструмента.Мне пришлось объединить несколько из них вместе с некоторыми вещами, которые я нашел в Интернете, чтобы создать карту, для которой я собирался.

Вот файл javascript, который выполняет то, что я пытался сделать.

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
    //
}