Home/ Questions/Q 8003927
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T16:46:56+00:00

I would like to alter the default display of the direction map to either:

  • 0

I would like to alter the default display of the direction map to either:

I made this basic script which only shows the entire route:

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have something of a hack here: http://jsfiddle.net/mR2LV/6/ click submit then click on the red car icon to open the Infowindow.

    This script assumes the path is only point A to point B (simple). It uses two separate maps, one that goes into the Infowindow “bubble” and the overall map. The idea is to keep two copies of the same information, and use one for the “zoom”. The route is in the variable 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>
    • 0