Googlemaps navigation

[funstad]

SOLVED (Thanks to JamesB)

Hey all,

 

I use Google Maps to allow people to navigate to our shop.the problem is that my route description always disappears under my footer.When I resize my browser directions get fully displayedso the problem is in my maxheight.js

So i search a way that when calcRoute() is launched my maxheight resize without the need of resize my browers.

 

 

Google JS code:

	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    <script type="text/javascript">		var directionDisplay;	var directionsService = new google.maps.DirectionsService();	function initialize() {		var latlng = new google.maps.LatLng(51.100899,4.415780);		directionsDisplay = new google.maps.DirectionsRenderer();		var myOptions = {			zoom: 17,			center: latlng,			mapTypeId: google.maps.MapTypeId.ROADMAP,			mapTypeControl: false		};		var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);		directionsDisplay.setMap(map);		directionsDisplay.setPanel(document.getElementById("directionsPanel"));  var image = '../images/contact/mapsicon.png';	  var marker = new google.maps.Marker({      position: latlng,	  title: 'Rijwielen De Zwaluw NV',      map: map,      icon: image		}); 	}		function calcRoute() {		var start = document.getElementById("routeStart").value;		var end = "51.100899,4.415780";		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);						} else {				if (status == 'ZERO_RESULTS') {					alert('No route could be found between the origin and destination.');				} else if (status == 'UNKNOWN_ERROR') {					alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');				} else if (status == 'REQUEST_DENIED') {					alert('This webpage is not allowed to use the directions service.');				} else if (status == 'OVER_QUERY_LIMIT') {					alert('The webpage has gone over the requests limit in too short a period of time.');				} else if (status == 'NOT_FOUND') {					alert('At least one of the origin, destination, or waypoints could not be geocoded.');				} else if (status == 'INVALID_REQUEST') {					alert('The DirectionsRequest provided was invalid.');									} else {					alert("There was an unknown error in your request. Requeststatus: nn"+status);				}			}		});	}	</script>

Edited August 13, 2014 by funstad

[justsomeguy]

Look inside maxheight for whatever it does when the browser is resized, and run the same code after adding the directions. It will probably be listening for a resize event.

[funstad]

Look inside maxheight for whatever it does when the browser is resized, and run the same code after adding the directions. It will probably be listening for a resize event.

I have added the maxheight.js script.I have totally no clue how to do this because i only know a few things about js.So i'm looking for someone who can help me with this.

[justsomeguy]

Search through the code for "resize" and see what you find. There should be an event handler for a resize event.

[funstad]

This is what i found with resize:

// Refresh elements height onResize event var __expand = this.expand; if (window.addEventListener) { window.addEventListener('resize', function(event) {return __expand.apply(__object, [( event || window.event)])}, false);} else if (window.attachEvent) { window.attachEvent('onresize', function(event) {return __expand.apply(__object, [( event || window.event)])}); } },

Edited August 12, 2014 by funstad

[justsomeguy]

It looks like it runs the __expand function in the context of __object (I'm not sure what __object is set to), and it passes the function the event object. Looking at the source on Google Code, it doesn't look like the expand method uses the parameter. How do you use that code on your page?

[funstad]

I think i need to add some changes in the code below but adding ElementMaxHeight(); doesnt work.

if (status == google.maps.DirectionsStatus.OK) {directionsDisplay.setDirections(response);			} else {

It's called like this:

<body onload="new ElementMaxHeight();"></body>

Edited August 12, 2014 by funstad

[funstad]

still looking for help its urgent

[JamesB]

Try changing

 

<body onload="new ElementMaxHeight();">

to:

 

<body onload="maxHeight = new ElementMaxHeight();">

 

and add:

 

maxHeight.expand.call(maxHeight);

under:

 

directionsDisplay.setDirections(response);

 

If that doesn't work can you post a link to your site.

[funstad]

Try changing

<body onload="new ElementMaxHeight();">

to:

<body onload="maxHeight = new ElementMaxHeight();">

and add:

maxHeight.expand.call(maxHeight);

under:

directionsDisplay.setDirections(response);

If that doesn't work can you post a link to your site.

I have just added it but when u press on calculate route (Bereken route) nothing happens.

 

site: http://tinyurl.com/mxgu25v

[JamesB]

I managed to get it working using a timer, I'm not sure which data needs to be updated to avoid using a timer, but it works with an interval of 1 millisecond.

 

change

 

maxHeight.expand.call(maxHeight);

to

 

setTimeout(function() { maxHeight.expand.call(maxHeight); }, 1);

[funstad]

 

I managed to get it working using a timer, I'm not sure which data needs to be updated to avoid using a timer, but it works with an interval of 1 millisecond.

 

change

maxHeight.expand.call(maxHeight);

to

setTimeout(function() { maxHeight.expand.call(maxHeight); }, 1);

thank you! Here I was looking for a couple of weeks!

Edited August 13, 2014 by funstad