close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

navigating to multiple addresses..

Thread began 11/21/2012 5:29 am by CraigR | Last modified 11/26/2012 11:32 am by Ray Borduin | 2939 views | 16 replies |

CraigRBeta Tester

navigating to multiple addresses..

my google map is retrieving several addresses from a database, and is providing me with 2 issues...

1. The infowindow displays on page load

if i revisit the wizard to edit the settings, the default address is always checked, eben if I uncheck it. - is there a way to manually edit this ?

I tried setting driving directions with no details, but it makes no difference, the infowindow is always displayed

2. I added a form so the user can submit a postcode to get directions, but the directions are always to the same address. How do I update the destination ?

Sign in to reply to this post

Ray BorduinWebAssist

Please provide a url to the page you are working on and I'll take a look and advise on how it can be updated.

Sign in to reply to this post

CraigRBeta Tester

wheretobuy.php

I will remove the login security for you.

thanks

Sign in to reply to this post

Ray BorduinWebAssist

I had to do a bit of coding to get this working. First I added a function to the page:

function addDirections(fromAddress,toAddress,isDefault,map,icon,point) {
var marker = new google.maps.Marker({
position: point,
shadow: icon.shadow,
icon: icon.image,
shape: icon.shape,
title: toAddress
});
if (fromAddress && isDefault) {
var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("wagmp_directions_3"));
var request = {
origin: fromAddress,
destination: toAddress,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
fromicon = {
image: new google.maps.MarkerImage('plugins/webassist/google_javascript/images/icon_greenA.png', new google.maps.Size(34,35), new google.maps.Point(0,0), new google.maps.Point(9,33)),
shadow: new google.maps.MarkerImage('plugins/webassist/google_javascript/images/traditionalflat_shadow.png', new google.maps.Size(34,35), new google.maps.Point(0,0), new google.maps.Point(9,33)),
shape: {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
}
}
marker.setIcon(new google.maps.MarkerImage('plugins/webassist/google_javascript/images/icon_greenB.png', new google.maps.Size(34,35), new google.maps.Point(0,0), new google.maps.Point(9,33)));
marker.setShadow(new google.maps.MarkerImage('plugins/webassist/google_javascript/images/traditionalflat_shadow.png', new google.maps.Size(34,35), new google.maps.Point(0,0), new google.maps.Point(9,33)));
var leg = result.routes[ 0 ].legs[ 0 ];
var frommarker = new google.maps.Marker({
position: leg.start_location,
title: fromAddress,
shadow: fromicon.shadow,
icon: fromicon.image,
});
var frominfowindow = new google.maps.InfoWindow({
content: ('<span style="font: 12px Verdana, Arial, Helvetica, sans-serif; color: black;"><strong>From:</strong><br />' + fromAddress.substring(0,fromAddress.indexOf(",")) + "<br />" + fromAddress.substring(fromAddress.indexOf(",")+1,fromAddress.lastIndexOf(",")) + "<br />" + fromAddress.substring(fromAddress.lastIndexOf(",")+1) + "</span>").replace("'", "\\'")
});
google.maps.event.addListener(frommarker, 'click', function() {
frominfowindow.open(map,frommarker);
});
frommarker.setMap(map);
}
});
}
}



then I went into the google map code and updated the infowindowtext field for each of the map points:

infowindowtext: '<span style="font: 12px Verdana, Arial, Helvetica, sans-serif; color: black;"><?php echo str_replace("'", "\'", "<strong>Get Directions From Postal Code:</strong><form onsubmit='return false'><input type='text' name='from' value=''/><input type='button' value='get directions' onclick='addDirections(this.form.elements[0].value, wagmp_map_1_obj.addresses[0].full,true,wagmp_map_3_obj.obj,wagmp_map_1_obj.icons[0],wagmp_map_1_obj.points[0]);'  /></form><strong>Address:</strong><br />353 lado de loma<br />vista, ca 92083 US"); ?></span>',



the part that I actually added is:

<strong>Get Directions From Postal Code:</strong><form onsubmit='return false'><input type='text' name='from' value=''/><input type='button' value='get directions' onclick='addDirections(this.form.elements[0].value, wagmp_map_1_obj.addresses[0].full,true,wagmp_map_3_obj.obj,wagmp_map_1_obj.icons[0],wagmp_map_1_obj.points[0]);'  /></form>



Which adds the get directions option directly into the info window itself... that way each point can have its own get directions option. You would get rid of the get directions form you have on top of the page since this is a different technique to allow for different directions for the different points.

You would replace the [0] with [1] for the second info window each time it appears.

Let me know if that works for you.

If you don't want any info windows open by default you can comment out the line:

infowindow.open(map,marker);

like:
//infowindow.open(map,marker);

Sign in to reply to this post

CraigRBeta Tester

thanks for the amazing response Ray.

I got rid of the infowindow - no problems.

I tried adding the function and additional code block to both the map page and the wagmp_map_1.php page, as I was having trouble getting it to work.

i changed references from wagmp_map_3_obj to wagmp_map_1_obj in the code, so it corresponded to my form

the infowindow now displays the search box, but clicking the button has unusual effect.

i get a response from the onclick, i get alert of 0, then 1, then the directions are created, but not to the address i selected, always the ip14 address

can you please clarify..." You would replace the [0] with [1] for the second info window each time it appears."

i think its nearly there, i'm just not quite up to speed.

(I updated my web page if that helps)

thanks

Sign in to reply to this post

Ray BorduinWebAssist

I updated the function to remove the "0" and "1" alerts that I left behind from my testing.

In the second info window it should be:

<form onsubmit="return false"><input type="text" value="" name="from"><input type="button" onclick="addDirections(this.form.elements[0].value, wagmp_map_1_obj.addresses[1].full,true,wagmp_map_1_obj.obj,wagmp_map_1_obj.icons[1],wagmp_map_1_obj.points[1]);" value="get directions"></form>

Notice I updated all of the references of "[0]" to "[1]"

Sign in to reply to this post

CraigRBeta Tester

sorry Ray, still not getting it.

I found the alerts in the function and removed them.

If I replace the [0] with [1] in the infowindowtext, the submit button doesn't do anything.

I'll admit my javascript knowledge is fairly basic, if I knew what I was trying to do I might get somewhere.

I updated the site, but left the [0] intact for now

Thanks for your help

Sign in to reply to this post

Ray BorduinWebAssist

OK there are a couple of things I overlooked.

First is that the first [0] should not be updated... since that is referring to the form element and not the address.

Second, it appears you are mapping the first point three times. Maybe it is repeated in a recordset or something, but for some reason it is appearing three times in the code. Since that is the case the second button should use this onClick code:

addDirections(this.form.elements[0].value, wagmp_map_1_obj.addresses[3].full,true,wagmp_map_1_obj.obj,wagmp_map_1_obj.icons[3],wagmp_map_1_obj.points[3]);

Sign in to reply to this post

CraigRBeta Tester

I am still trying to get my head around this.

You are correct in that my recordset had multiple instances of the same postcode, (to try and achieve something else), - so what I have done is created another map page with a simpler recordset, so I only have one row per postcode, in order to get this working, ..I can do the other bit later...

On my map2 page, I presently have 4 address rows returned from my recordset, and 4 map points.
The issue I am having is that the addresses are created on page load - from the recordset, so the form elements are not static.
My recordset is sorted by LocationID, so the order in which the address postcodes are loaded is as follows..

So in the infowindow form, when I change the values in the square brackets as shown, they appear to correspond to the form elements outlined in the table

Postcode LocationID Form Element
IP14 4PH 1 0
CO7 7HH 2 1
CO6 BQT 3 2
IP28 6TX 4 3

<input type='text' name='from' value=''/><input type='button' value='get directions' onclick='addDirections(this.form.elements[0].value, wagmp_map_2_obj.addresses[0].full,true,wagmp_map_2_obj.obj,wagmp_map_2_obj.icons[0],wagmp_map_2_obj.points[0]);' /></form>

eg when I change the values to [2], the directions will be from the entered postcode to CO6 BQT
and when I change the values to [3], the directions will be from the entered postcode to IP28 6TX

So do the form elements[0] and [1] etc also need to be created from within the loop index ?
I have tried replacing the numbers with variables, but it doesn&#8217;t work.
I have uploaded map2.php to my test site, map2.php

Sign in to reply to this post

Ray BorduinWebAssist

Since it is dynamic, you would probably have to use a variable reference instead of numbers at all.

Something like:

infowindowtext: '<span style="font: 12px Verdana, Arial, Helvetica, sans-serif; color: black;"><?php echo ("<strong>Get Directions From Postal Code:</strong><form onsubmit=\"return false\"><input type=\"text\" name=\"from\" value=\"\"/><input type=\"button\" value=\"get directions\" onclick=\"addDirections(this.form.elements[0].value, wagmp_map_3_obj.addresses['+loopIndex+'].full,true,wagmp_map_3_obj.obj,wagmp_map_3_obj.icons['+loopIndex+'],wagmp_map_3_obj.points['+loopIndex+']);\"  /></form><strong>Address:</strong><br /><?php echo($Recordset1['street']); ?><br /><?php echo($Recordset1['city']); ?>, <?php echo($Recordset1['state']); ?> <?php echo($Recordset1['zip']); ?> <?php echo($Recordset1['country']); ?>"); ?></span>',
Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...