Re: Trouble manipulating a Marker String

[Esa]

Your have a syntax error in parseFloat(). That is a function, not a
method. Instead of

var lat = temp2[0].parseFloat();

You should try:

var lat = parseFloat(temp2[0]);

[geoco...@gmail.com]

On Feb 21, 5:57 am, Rick Donohoe <crazyra...@aol.com> wrote:
> Hi guys,
>
> Site:www.my-walk.com/addwalk.php
>
> I have a method which takes a string of saved markers, then I want to
> break it down so I can add them to a Marker array and display them on
> a map.
> At the moment Im using a defined marker string becuase I was having
> issues carrying the marker String as a session variable into the mySQL
> and back, but
> that doesn't relate to this group....

How do we get that link to reproduce the problem?


>
> function addMap(coordinates) {
>
> var coordinateString = "(18.66774725247165, -3.3367449040771535),
> (54.6671516, -3.3574301),(54.6750929147338, -3.3477312322021535),
> (54.6750929147338, -3.377256989038091),(54.
> 667052323738794,
> -3.393908142602544),(54.6671516, -3.3574301),(54.6671516,
> -3.3574301),";
>
> coordinateString = coordinateString.replace(/[(]/g, "");
> coordinateString = coordinateString.replace(/[)],/g, "&");
>
> var i = 0;
> var temp = [];
> var temp2 = [];
>

What is the value of coordinateString here?

> //split marker string into individual markers
> temp = coordinateString.split("&");
>

What is the value of temp[0] here?

> //split first marker into lat and lng values
> temp2 = temp[0].split(",");

> var lat = temp2[0].parseFloat();

> alert(lat);
> var lng = temp2[1].parseFloat();
> alert(lng);
>
> map.setCenter(lat, lng);

The above line is not valid (as I believe was pointed out in response
to a previous post)

Why another thread?
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/8004b87d6607e7c5/d2a159546b5986a0?lnk=gst&q=Marker+String#d2a159546b5986a0

-- Larry

>
> marker = new google.maps.Marker({
> position: new google.maps.LatLng(lat, lng),
> map: map
>  });
>  marker.setMap(map);
>
> // -1 gets rid of the last string which is empty space
> // splits rest of markers into lat lng
> for (i = 1; i < temp.length-1; i++) {
>
> temp2 = temp[i].split(",");

> var lat = temp2[0].parseFloat();

> var lng = temp2[1].parseFloat();
>
> marker = new google.maps.Marker({
> position: new google.maps.LatLng(lat, lng),
> map: map
>  });
>  marker.setMap(map);
>
> }
> }
>
> The issue is alert(lat) and alert(lng) doesn't work, so there is
> issuesw around the parseFloat() area.
> Why is this?
> Also can you see any other problems further down the line??
>
> Thankyou very much,
>
> Rick

[geoco...@gmail.com]

On Feb 21, 9:51 am, Esa <esa.ilm...@gmail.com> wrote:
> Your have a syntax error in parseFloat(). That is a function, not a
> method. Instead of
>
>     var lat = temp2[0].parseFloat();

I would think your browser should report that to you.

-- Larry

[David]

Rick,

I took the code you posted and tried stepping through your string
manipulation and found that the replace(and following split) calls
left alot of leating spaces on the Latitude. this would be a good
reason for the parse to fail. Try triming off all leading and
trailing spaces from the numbers before you try to parse them.

good luck,

David

On Feb 21, 5:57 am, Rick Donohoe <crazyra...@aol.com> wrote:
> Hi guys,
>
> Site:www.my-walk.com/addwalk.php
>
> I have a method which takes a string of saved markers, then I want to
> break it down so I can add them to a Marker array and display them on
> a map.
> At the moment Im using a defined marker string becuase I was having
> issues carrying the marker String as a session variable into the mySQL
> and back, but
> that doesn't relate to this group....
>

> function addMap(coordinates) {
>
> var coordinateString = "(18.66774725247165, -3.3367449040771535),
> (54.6671516, -3.3574301),(54.6750929147338, -3.3477312322021535),
> (54.6750929147338, -3.377256989038091),(54.
> 667052323738794,
> -3.393908142602544),(54.6671516, -3.3574301),(54.6671516,
> -3.3574301),";
>
> coordinateString = coordinateString.replace(/[(]/g, "");
> coordinateString = coordinateString.replace(/[)],/g, "&");
>
> var i = 0;
> var temp = [];
> var temp2 = [];
>

> //split marker string into individual markers
> temp = coordinateString.split("&");
>

> //split first marker into lat and lng values
> temp2 = temp[0].split(",");

> var lat = temp2[0].parseFloat();

> alert(lat);
> var lng = temp2[1].parseFloat();
> alert(lng);
>
> map.setCenter(lat, lng);
>

> marker = new google.maps.Marker({
> position: new google.maps.LatLng(lat, lng),
> map: map
>  });
>  marker.setMap(map);
>
> // -1 gets rid of the last string which is empty space
> // splits rest of markers into lat lng
> for (i = 1; i < temp.length-1; i++) {
>
> temp2 = temp[i].split(",");

> var lat = temp2[0].parseFloat();

[geoco...@gmail.com]

On Feb 21, 7:37 am, David <cpmccutch...@gmail.com> wrote:
> Rick,
>
> I took the code you posted and tried stepping through your string
> manipulation and found that the replace(and following split) calls
> left alot of leating spaces on the Latitude.  this would be a good
> reason for the parse to fail.  Try triming off all leading and
> trailing spaces from the numbers before you try to parse them.

parseFloat should handle leading and trailing spaces, it is other (non-
numeric characters) that will cause problems.

-- Larry

> > Rick- Hide quoted text -
>
> - Show quoted text -

[Rick Donohoe]

The & part splits them into individual markers so temp[0] would be:

"3.14...., -1.2...." for example
the second split then leaves the first number as the lat, and the
second number as a lng, although it should have one leading space.
Again, I read that this is no issue for parseFloat to work.

Apologies Larry, I did change those invalid (lat, lng) lines using
latlng = new google.maps.Latlng(lat, lng), although I couldn't tell if
it had worked as the parseFloat() lines were still incorrect.

I'll re syntax the parse float lines and see what happens, then get
back to you guys. In the meantime cheers for all your help!!

Rick

[Rick Donohoe]

Hey Guys,

Corrected that but still having issuses. Current code is:


function addMap(coordinates) {

/*coordinates = coordinates.toString()
alert(coordinates);
*/

var coordinateString = "(18.66774725247165, -3.3367449040771535),
(54.6671516, -3.3574301),(54.6750929147338, -3.3477312322021535),
(54.6750929147338, -3.377256989038091),(54.667052323738794,
-3.393908142602544),(54.6671516, -3.3574301),(54.6671516,
-3.3574301),";

var coordinates = coordinateString.replace(/[(]/g, "");
coordinates = coordinates.replace(/[)],/g, "&");

var temp = [];
var temp2 = [];

//split marker string into individual markers

temp = coordinates.split("&");

//split first marker into lat and lng values
temp2 = temp[0].split(",");

alert(temp2[0] + " becomes " + parseFloat(temp2[0]));
alert(temp2[1] + " becomes " + parseFloat(temp2[1]));

var latlng = new google.maps.LatLng(parseFloat(temp2[0]),
parseFloat(temp2[1]));

alert(latlng);

map.setCenter(latlng);

marker = new google.maps.Marker({
position: latlng,

map: map
});
marker.setMap(map);

// -1 gets rid of the last string which is empty space

for (var i = 1; i < temp.length-1; i++)

{
temp2 = temp[i].split(",");

var latlng = new google.maps.LatLng(parseFloat(temp2[0]),
parseFloat(temp2[1]));
alert(latlng);

marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setMap(map);
}
}


I've but a few alerts in there so you can see what the values are when
testing it.

First issue: latlng appears to be fine, but i'm sure
map.setCenter(latlng); dosen't work. The code does not add any markers
to the map, and it also dosen't get to the alert inside the for loop.

Second issue: I want to pass through coordinates into this method,
which is exactly the same as coordinateString, but recieved from
MySql. When I comment out coordinateString and use coordinates which
has been passed through instead, then alert(coordinates) shows
'undefined', and it doesn't reach the next alert.

Third issue: Im still having the issue were every so often (3/4 times)
when I reload or update the page, the map doesn't load, only the grey
canvas, and I have to restart firefox to fix it. Any ideas?

Thanks guys,

Rick

[geoco...@gmail.com]

I don't see the code above in the page to which you posted a link. Do
you have a link to your test map?

>
> First issue: latlng appears to be fine, but i'm sure
> map.setCenter(latlng); dosen't work. The code does not add any markers
> to the map, and it also dosen't get to the alert inside the for loop.

The map that you posted a link to adds markers and gives me alerts
(but they say "undefined")

>
> Second issue: I want to pass through coordinates into this method,
> which is exactly the same as coordinateString, but recieved from
> MySql. When I comment out coordinateString and use coordinates which
> has been passed through instead, then alert(coordinates) shows
> 'undefined', and it doesn't reach the next alert.

That is the behavior I see on your test map (in IE, doesn't work in
Chrome).

Javascript is case sensitive, latlng and latLng are different:
alert(event.latlng);
addMarker(event.latLng);

>
> Third issue: Im still having the issue were every so often (3/4 times)
> when I reload or update the page, the map doesn't load, only the grey
> canvas, and I have to restart firefox to fix it. Any ideas?

I get a grey map in Chrome every time. You seem to assume that if the
browser supports geolocation, the user will allow it. I deny it.

-- Larry

>
> Thanks guys,
>
> Rick

[Rick Donohoe]

Apologies Larry, that was the dynamic Map page, where users can click
on the map to add routes.
www.my-walk.com/index.php is the homepage which allows users to click
on a route listed below the map, and the page should then show the
route on the map.

I corrected the case sensitive part.

On Feb 26, 2:03 pm, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

[geoco...@gmail.com]

On Feb 26, 9:33 am, Rick Donohoe <crazyra...@aol.com> wrote:
> Apologies Larry, that was the dynamic Map page, where users can click
> on the map to add routes.

www.my-walk.com/index.php

That doesn't work for me in Chrome if I deny geolocation.

> is the homepage which allows users to click
> on a route listed below the map, and the page should then show the
> route on the map.
>
> I corrected the case sensitive part.

Now in IE I get lots of alerts about x becoming y and a javascript
error:
Message: 'map' is null or not an object
Line: 67
Char: 2
Code: 0
URI: http://www.my-walk.com/index.php?op=s&id=21

because you call addMap before your page onload event fires and your
map gets initialized. You probably shouldn't do that, call the first
addMap at the end of your initialize function.

-- Larry

[geoco...@gmail.com]

On Feb 26, 9:56 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

> On Feb 26, 9:33 am, Rick Donohoe <crazyra...@aol.com> wrote:
>
> > Apologies Larry, that was the dynamic Map page, where users can click
> > on the map to add routes.
>
> www.my-walk.com/index.php
>
> That doesn't work for me in Chrome if I deny geolocation.
>
> > is the homepage which allows users to click
> > on a route listed below the map, and the page should then show the
> > route on the map.
>
> > I corrected the case sensitive part.
>
> Now in IE I get lots of alerts about x becoming y and a javascript
> error:
> Message: 'map' is null or not an object
> Line: 67
> Char: 2
> Code: 0
> URI:http://www.my-walk.com/index.php?op=s&id=21
>
> because you call addMap before your page onload event fires and your
> map gets initialized.  You probably shouldn't do that, call the first
> addMap at the end of your initialize function.

If I fix that (and a couple of other things, like create a
polyline...), it works (at least as far as I can tell):
http://www.geocodezip.com/my-walk_index.html
(even in Chrome...)

-- Larry

[Rick Donohoe]

This is what I have in my initialise, as far as setting the location
goes. (Global variable for university is set as: var university = new
google.maps.LatLng(52.94, -1.195);)

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new
google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
});
} else {
initialLocation = university;
map.setCenter(initialLocation);
}

Does this not mean that if the user clicks deny then it will restore
to setting the map centred about (52.94, -1.195)?


The alerts are there as someone previously asked what the value was.
The last alert is the important one as it shows it is a true Lat Lng
value, showing the parseFloat stuff all worked.


I'm a little confused with the initialise stuff now.. But heres my new
idea:

if("showRoute"==strval($_REQUEST['op']) &&
is_numeric($_REQUEST['id']) )
{
$r = mysql_query ("SELECT * FROM routes where ID = ".
$_REQUEST['id']);
$row = mysql_fetch_assoc($r);
$addmap = true;
}

include ('includes/header_static.php');


I then have within header_static....


function initialize() {

var myOptions = {
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

// Try W3C Geolocation else set initial location to default
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new
google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
});
} else {
initialLocation = university;
map.setCenter(initialLocation);
}

if(<?php echo ($addmap) ?>)
{
addMap(<?php $coordinates ?>);
}

} // end of initialize


Im sure Ive gone a bit wrong here, but the idea is that the addMap()
method is within initialize, but only gets called when $addmap is
true. Does this sound ok?

Im sure i've screwed up some of the php stuff here though. Can you
helpme correct this?

Rick

[geoco...@gmail.com]

On Feb 26, 10:44 am, Rick Donohoe <crazyra...@aol.com> wrote:
> This is what I have in my initialise, as far as setting the location
> goes. (Global variable for university is set as: var university = new
> google.maps.LatLng(52.94, -1.195);)
>
> if(navigator.geolocation) {
>                 navigator.geolocation.getCurrentPosition(function(position) {
>                         initialLocation = new
> google.maps.LatLng(position.coords.latitude,position.coords.longitude);
>                         map.setCenter(initialLocation);
>                 });

What happens in this case if getCurrentPosition fails? (hint:
nothing)

>         } else {
>                 initialLocation = university;
>                 map.setCenter(initialLocation);
>         }
>
> Does this not mean that if the user clicks deny then it will restore
> to setting the map centred about (52.94, -1.195)?

Nope.

I don't do PHP (or at least I haven't had any need to, I'm sure I
could)
PHP generates HTML that is served to the browser. The HTML that
appears in the browser is what matters for the Google Maps API. PHP
specific questions should go to a PHP support group.

-- Larry

>
> Rick

[Rick Donohoe]

This is what I have in my initialise, as far as setting the location
goes. (Global variable for university is set as: var university = new
google.maps.LatLng(52.94, -1.195);)

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new
google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
});

} else {
initialLocation = university;
map.setCenter(initialLocation);
}

Does this not mean that if the user clicks deny then it will restore
to setting the map centred about (52.94, -1.195)?

Rick

[Rick Donohoe]

Ok no worries bout the php bit.

Interestingly in the last few minutes I've got the map to show the
markers and centre around the right place. Unfortunately When
index.php is loaded up, it shows no map. when I click on a route to
show, it shows it fine on a map.

Coding can be very irritating!!

There is now stuff to do with MySql failing, but im sure I have
changed nothing... Do you have any ideas on this?

Thanks for the hints on the Location stuff. Will I be able to learn
the solution from http://code.google.com/apis/maps/documentation/javascript/basics.html
or can you point me elsewhere? Im sure I just used what I learnt on
that page :s

Rick

[Rick Donohoe]

[geoco...@gmail.com]

On Feb 26, 10:57 am, Rick Donohoe <crazyra...@aol.com> wrote:
> Ok no worries bout the php bit.
>
> Interestingly in the last few minutes I've got the map to show the
> markers and centre around the right place. Unfortunately When
> index.php is loaded up, it shows no map. when I click on a route to
> show, it shows it fine on a map.
>
> Coding can be very irritating!!
>
> There is now stuff to do with MySql failing, but im sure I have
> changed nothing... Do you have any ideas on this?
>
> Thanks for the hints on the Location stuff. Will I be able to learn

> the solution fromhttp://code.google.com/apis/maps/documentation/javascript/basics.html

> or can you point me elsewhere? Im sure I just used what I learnt on
> that page :s

Did you miss this post:
http://groups.google.com/group/google-maps-js-api-v3/msg/ee9481474e0fa239
(second try, this should only be the post)

-- Larry

>
> Rick

[Rick Donohoe]

Definitely did and it was a big help!

Ok, my map is looking nice, although it seems to set itself on the
other side of the world!?

I used the poly line stuff, that's actualy what i wanted, without the
markers. I've commented out the marker.setMap(map) lines, although the
markers are still appearing :s

Can you give a quick explanationof the bounds thing? Does thatjust
ensure the map area and zoom level always accomodate all the markers
in view??

Rick

[Rick Donohoe]

[geoco...@gmail.com]

On Feb 26, 11:28 am, Rick Donohoe <crazyra...@aol.com> wrote:
> Definitely did and it was a big help!
>
> Ok, my map is looking nice, although it seems to set itself on the
> other side of the world!?
>
> I used the poly line stuff, that's actualy what i wanted, without the
> markers. I've commented out the marker.setMap(map) lines, although the
> markers are still appearing :s

In these lines:

marker = new google.maps.Marker({
position: latlng,
map: map
});

The "map: map" is the same as calling marker.setMap(map).

>
> Can you give a quick explanationof the bounds thing? Does thatjust
> ensure the map area and zoom level always accomodate all the markers
> in view??

As it says in the documentation:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
fitBounds(bounds:LatLngBounds) Sets the map to fit to the given
bounds.

map.fitBounds(bounds)
centers and zooms them map so that the area defined by the bounds
object is completely displayed

If the bounds object covers all the markers on the map (or all the
vertices in your polyline), then it will zoom and center the map on
them.

You seem to have lost the bounds.extend(latlng).

-- Larry

>
> Rick

[Rick Donohoe]

Hey Larry,

If you check out the map I have it all working . All routes in the
database are shown at the bottom of the page, and when the user clicks
"show route", the route is displayed.

Big thank you for that!

Now I have added a geocoder search box. What I would like now is the
user to search for a place, and then when the map moves to the
specific address, I would like all routes within the bounds to be
listed below the map, and when the user hovers over a route it is
displayed on the map.

Quite a task I can see, but do you have any idea where I start on
this? Would i load each route in from the database, convert the
strings as before into the polyline/route, check if it is within the
bounds, then if it is, display it??

Will there be a larger load time? Also, how can I make it so it
recalculates if a route is within bounds if the user zooms, or moves
around the map??

Thanks,

Rick

[Rick Donohoe]

> Also, how can I make it so it
> recalculates if a route is within bounds if the user zooms, or moves
> around the map??

I assume this part of the question is answered by the
"bounds_changed": This event is fired when the viewport bounds have
changed.