Jump to content

Googlemaps navigation


funstad
 Share

Recommended Posts

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.

 

K9JDBLh.jpg

 

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 by funstad
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by funstad
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by funstad
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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);
  • Like 1
Link to comment
Share on other sites

 

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 by funstad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...