Hide part of map

Question

<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">

var directionsDisplay;
var directionsService;
var map;

function initialize() 
{    
    directionsDisplay= new google.maps.DirectionsRenderer();
    directionsService = new google.maps.DirectionsService();

    var mapProp = 
    {
        zoom: 7,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('textDirection'));

}

function showMap()
{
    document.getElementById("googleMap").style.display = 'inline';
    document.getElementById("textDirection").style.display = 'inline';
    var start = document.getElementById('origin').value;
    var end = document.getElementById('destination').value;
    var directionsRequest = 
    {
        origin : start,
        destination : end,
        travelMode : google.maps.TravelMode.DRIVING
    }

    directionsService.route(directionsRequest, function(response, status)
    {
        if(status === google.maps.DirectionsStatus.OK)
        {  
            directionsDisplay.setDirections(response);          
        }
        else
        {
            window.alert('Cannot'); 
        }
    });
}

function resetMap()
{
    document.getElementById("origin").value = '';
    document.getElementById("destination").value = '';
    document.getElementById("googleMap").style.display = 'none';
    document.getElementById("textDirection").style.display = 'none';
}  
</script>

<style>
#textDirection{
width: 300px;
height: 60%;
float: right;
overflow-y: auto;
margin-top: 1%;
margin-right: 29%;
}

#googleMap{
width : 50%;
height : 60%;
top: 5%;
position : absolute;
margin-left: 5px; 
}
</style>
</head>

<body onload="initialize()">
<form action="showmap1.php" method="post">
From: <input type="text" name="origin" id="origin" size="30" />&nbsp;
To:<input type="text" name="destination" id="destination" size="30" />
<input type="button" value="Search" onclick="showMap()" />
<input type="button" value="Reset" onclick="resetMap()" /><br />
<div id="googleMap"></div>
<div id="textDirection"></div>
</form>
</body>
</html>

From above code, I have following questions:
(1) JavaScript
When I run the above code, I get the output like the below image:

The gray part is the map displayed. I want to hide it when I first run the page. How should I modify it?

(2) JavaScript
After I search a correct result, now I try to search a blank destination. It shows the below image:

However, the previous map and route are show together with alert. My expected output is only show the alert message "Cannot" with no map and route. How should I modify it?

(3) CSS
When I zoom my web page into 120%, my output is like below image:
Oh my god, i can't see the route. It is more even worst if I zoom my web page bigger and bigger. Why and how should I modify it in css?

Neo · Accepted Answer · 2015-10-15T07:42:30.820

(1)

you should put

var mapProp = 
{
    zoom: 7,
    center: {lat: 62, lng: -110.0},
    mapTypeId : google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
directionsDisplay.setMap(map);

into showMap() function. Map would not show at the first time load page. It only show when you press Search button.

(2)

If show Cannot alert, hide the map and route as following:

if(status === google.maps.DirectionsStatus.OK)
{  
     directionsDisplay.setDirections(response);          
}
else
{
    document.getElementById("googleMap").style.display = 'none';
    document.getElementById("textDirection").style.display = 'none';
    window.alert('Cannot');
}

(3)

If you ues float:right, should not fix the width of element. If the width of elements is larger than screen, it will break your layout. I am not good at CSS, you could try the following code. Hope this help ^^

#textDirection{
    width: 40%;
    height: 60%;
    float: right;
    overflow-y: auto;
    margin-top: 1%;
}

#googleMap{
    width : 50%;
    height : 60%;
    top: 5%;
    position : absolute;
    margin-left: 5px; 
}

Update:

To hide the map and only show when you need, please using event:

google.maps.event.trigger(map, "resize");

I had update my code, please check this. We only need is set zoom of map smaller to 1 and increase it immediately:

google.maps.event.addListener(map, "idle", function(){
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
}); 

map.setZoom( map.getZoom() - 1 );
map.setZoom( map.getZoom() + 1 );

Here is updated answer

Nice...I have a questions for Q2. I try your fiddle, and I still see the map and route together with alert ("Cannot"). — KKL Michael, Oct 15 '15 at 03:04
Nice ^^...But this time the map cannot show the directions from your latest fiddle... — KKL Michael, Oct 15 '15 at 06:20
Very very nice ^^... You solved my problem... I will understand your code and also learn jQuery as well... Next time if I have a problem I will find you... — KKL Michael, Oct 15 '15 at 08:42

score 1 · Answer 2 · edited May 23 '17 at 12:29

If you're looking to use the google maps API, here is a function to use: Note: you must add &libraries=geometry to your script source

find in Google Maps - How to get the distance between two point in metre?

var p1 = new google.maps.LatLng(45.463688, 9.18814);
var p2 = new google.maps.LatLng(46.0438317, 9.75936230000002);

alert(calcDistance(p1, p2));

//calculates distance between two points in km's
function calcDistance(p1, p2){
  return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
}

}

also you can use like

   var location1 = new google.maps.LatLng(42.3584308, -71.0597732);
      var location2 = new google.maps.LatLng(42.348805455204214, -71.07485794349975);

      var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      directionsService = new google.maps.DirectionsService();
      directionsDisplay = new google.maps.DirectionsRenderer(
      {
      suppressMarkers: true,
      suppressInfoWindows: true
      });
      directionsDisplay.setMap(map);
      var request = {
      origin: location1, 
      destination:location2,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) 
      {
      if (status == google.maps.DirectionsStatus.OK) 
      {
      directionsDisplay.setDirections(response);
      //alert("the distance: " + response.routes[0].legs[0].distance.text);
      distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
      //distance += "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
      document.getElementById("distance").innerHTML = distance;
      }
      });

      // show a line between the two points
      var line = new google.maps.Polyline({
      map: map, 
      path: [location1, location2],
      strokeWeight: 7,
      strokeOpacity: 0.8,
      strokeColor: "#FFAA00"
      });
      }

      google.maps.event.addDomListener(window, 'load', initialize);

Fiddle link http://jsfiddle.net/39KKu/

Hide part of map

2 Answers2