дисплея End-точка маршрута Google

Я хотел бы изменить отображение по умолчанию карты направления либо:дисплея End-точка маршрута Google

дисплея увеличенного изображения конечной точки с маршрутом, указанной в синем
Показать увеличенный воздушный шар вместе с конечной точкой маркеров (http://www.birdwingfx.com/jQuery_gps/demo_gps/gps_demo.html)

Я сделал это базовый сценарий, который показывает только весь маршрут:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBSHoB4rbbeXHf_KfV-pONQvTiSLIJH_G8&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     var directionsDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     var map; 
     var bilzen = new google.maps.LatLng(50.87228390728491, 5.512539388885443); 

     function initialize() { 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var Bilzen = new google.maps.LatLng(50.87228390728491, 5.512539388885443); 
      var myOptions = { 
       zoom:11, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: bilzen 
     } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    directionsDisplay.setMap(map); 
    } 

    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, 
     unitSystem: google.maps.DirectionsUnitSystem.metric 
}; 
directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 
    } 
}); 
    } 
    </script> 
    </head> 
    <body onload="initialize()"> 
<form action="#" onsubmit="calcRoute(); return false;" > 
    <input name="start" id="start" value="start" type="text"> 
    <input name="end" id="end" value="end" type="text"> 
    <input name="Submit" type="submit"> 
    </form> 

    <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html>

источник

2012-05-23 Maarten Provo

У меня есть что-то вроде взлома здесь: http://jsfiddle.net/mR2LV/6/ нажмите кнопку «Отправить», затем нажмите значок «Красный автомобиль», чтобы открыть Infowindow.

Этот сценарий предполагает, что путь - это только точка A до точки B (простая). Он использует две отдельные карты, которые входят в «пузырь» Infowindow и общую карту. Идея состоит в том, чтобы сохранить две копии одной и той же информации и использовать ее для «масштабирования». Маршрут находится в переменной path.

minimap = new google.maps.Map(document.getElementById("minimap"), miniOptions); 

if(document.getElementById("minimap")) { 
    document.getElementById("minimap").style.display= "block"; 
    infomap.setContent(document.getElementById("minimap")); 
} 

var path = response.routes[0].overview_path; 


google.maps.event.addListener(endMarker, 'click', function(event) { 
    infomap.open(map, this); 
    google.maps.event.trigger(minimap, 'resize'); 
    minimap.setCenter(path[path.length-1]); 
}); 


<div id="map_canvas" style="width:100%; height:100%"></div> 
<div id="minimap" style="width: 220px; height:200px; display: none"></div>

источник

2012-05-23 17:44:19

дисплея End-точка маршрута Google

ответ

Смежные вопросы