CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps-api-3
KKL Michael
KKL Michael

Reputation: 795

Hide part of map

Cont. on Distance between two locations 

<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:

enter image description here

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:

enter image description here

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: enter image description here
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?

Upvotes: 0

Views: 432

Answers (2)

Neo
Neo

Reputation: 1469

(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

Upvotes: 2

Arun
Arun

Reputation: 1185

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/

Upvotes: 1

Related Questions