Modify Map (add data) after initialization

[Kasper]

I have a map on my webpage, which works fine, but I want to add data to it after it has been initialized.
The map that is showing, is a normal map, with about 20-30 custom (static) markers on it.

I would then like to add (after 1 second) a marker and a polyline to the map.

But then, the map should update with that data (the first 20-30 custom markers, the new marker and the polyline), every 30 seconds.

For refreshing the map, I could use a setInterval function to reinitialize the map every (for example) 5 seconds, but that doesnt work very well...

So, these are my two main questions:
1. How do you add a marker to a map, after the map has been initialised?
I tried: setting the map variable as a global variable, and then setting the marker for map: map, but that doesnt work:

var treinmarker = new google.maps.Marker({position: position, map: map, title: 'Trein', icon: 'icon.png' });

2. How do I update the position of a marker, without having to refresh the complete map? (thus having to add the marker again)

[geoco...@gmail.com]

On Nov 2, 3:23 pm, Kasper <kaspervandel...@gmail.com> wrote:
> I have a map on my webpage, which works fine, but I want to add data to it
> after it has been initialized.

> The map that is showing, is a normal map, with about *20-30 custom* (static)
> * markers* on it.
>
> I would then like to add (*after 1 second*) a *marker* and a *polyline* to

> the map.
>
> But then, the map should update with that data (the first 20-30 custom

> markers, the new marker and the polyline), *every 30 seconds*.

>
> For refreshing the map, I could use a setInterval function to reinitialize
> the map every (for example) 5 seconds, but that doesnt work very well...
>
> So, these are my two main questions:

> *1. How do you add a marker to a map, after the map has been initialised?*

> I tried: setting the map variable as a global variable, and then setting
> the marker for map: map, but that doesnt work:
>
> var treinmarker = new google.maps.Marker({position: position, map: map,
>
> > title: 'Trein', icon: 'icon.png' });

Is your map variable global?

Please read and follow the posting guidelines and provide a link to
your map that exhibits the problem, not code.

>
> *2. How do I update the position of a marker, without having to refresh the
> complete map? (thus having to add the marker again)*

Example (using v2 but the concept is the same):
http://www.geocodezip.com/v2_volcanoBrowser.asp

The basic concept is AJAX:
The Basics - Part 11 The AJAX Philosophy
http://econym.org.uk/gmap/basic11.htm
(from Mike Williams' v2 tutorial, but the concepts apply to v3)

-- Larry

[Kasper]

> Is your map variable global?

Yes, I believe it is, as I declared it in a <script> piece outside any function.
(like this: var map;)

As for the map that shows the problem, that page is here: http://bit.ly/vZdevz

That loads a page, then gets data from the iFrame, and calls a new function, based on that data.
The new script is loaded by this line: loadjscssfile(url, 'js');
Where the loadjscssfile is from this tutorial: http://bit.ly/7l24RH

That function calls the following script (which creates the new marker I was talking about):
http://bit.ly/rPVbs9

That code is then executed, but nothing happens to the map.

> Example (using v2 but the concept is the same):
> http://www.geocodezip.com/v2_volcanoBrowser.asp
>
> The basic concept is AJAX:
> The Basics - Part 11 The AJAX Philosophy
> http://econym.org.uk/gmap/basic11.htm
> (from Mike Williams' v2 tutorial, but the concepts apply to v3)

Thanks for those examples, Ill have a look!

[Kasper]

I've had a look at his code, but it doesnt look that different from mine, here is his code: [from the page source]
http://pastebin.com/Lgcv4BWs

It creates a new marker, infowindow, etc. nothing especial.
Though it does do this:
map.clearOverlays();

That clears all the custom data, right?
But that would also clear my 20-30 custom markers.
They don't need to be removed. It wouldnt harm, but for performance it would seem better to me to have them stay...
(wouldnt it be possible to put those markers and the new polyline and dynamic marker onto another overlay?)
[note: I do not know much about overlays]

Also, there is this line: map.addOverlay(marker);
Does that add the marker?
If so, that is what I'm missing. I think.

Oh and one more thing:
when I call that new script, and I do: alert("map variable = "+map);
I get this: map variable = undefined

But that shouldnt happen, right? because I've declared it globally...
I could also pass it to the php page which generates the javascript, but I'm not sure how that would work... (more importantly: if it would work, as the map variable needs to be modified, not read?)

[Kasper]

Apparently I DIDNT have it properly declared. Or I kinda did:
I declared it globally, but then in the function for the marker, I redeclared it.
I removed that declaration and now the polyline shows up just perfect.
However, the marker wont show...
The script used there is this: http://bit.ly/rPVbs9 [linked to it above]

When I alert(position) it says undefined :S
Weird...

Now, when the function is re-executed, it places the new objects over the old... Is it possible to remove the old objects (the marker and polyline) and then place them again [with new values]?

[Rossko]

> When I alert(position) it says undefined :S
> Weird...

In your code, 'position' is only defined within a conditional. If the
conditional is never satisfied (it isn't), then 'position' remains
undefined

[geoco...@gmail.com]

On Nov 3, 4:49 am, Kasper <kaspervandel...@gmail.com> wrote:
> Apparently I DIDNT have it properly declared. Or I kinda did:
> I declared it globally, but then in the function for the marker, I
> redeclared it.
> I removed that declaration and now the polyline shows up just perfect.
> However, the marker wont show...
> The script used there is this:http://bit.ly/rPVbs9[linked to it above]
>
> When I alert(position) it says undefined :S
> Weird...
>
> Now, when the function is re-executed, it places the new objects over the

> old... *Is it possible to remove the old objects (the marker and polyline)
> and then place them again [with new values]?*

Yes. Markers can be "moved" by calling .setPosition on them (if you
have access to them). They polyline can be removed from the map by
calling .setMap(null). You can also add points to it or delete it and
recreate it.

-- Larry

[Kasper]

But that exact same function works just fine here: http://bit.ly/vY4YFj
So what could be going wrong?

[Kasper]

Sweet! Ive got it working now! (here: http://bit.ly/vY4YFj)

But back to the case of adding the marker after initialisation... do you have any more tips on that?

[Kasper]

For some reason the position variable still returns undefined....
I've checked all the expressions that should be defining the position variable, and those are all ok...
weeeird :S

[Kasper]

After a lot of messing around I got it working by making the position variable a global variable AND by redefining it within the travel function...
However, now I'm running into a problem with the marker that is being added: it somehow loses its definition after its placed... So it has to be placed again and again...
Trying to figure that out now...

[Kasper]

And I've got the last part fixed aswell now. Because I was loading the javascript after the page loaded, somehow some variables didn't want to stay global. So I declared them on the part of the page that was loaded, and it all works fine now.

I'm glad this is finally fixed :)

[Kasper]

Can something similar also be done with markers and infowindows?
Please let me know :D

[geoco...@gmail.com]

On Nov 7, 8:33 am, Kasper <kaspervandel...@gmail.com> wrote:
> Can something similar also be done with markers and infowindows?
> Please let me know :D

Similar to what? It looks like the message you might have replied to
was about how to move markers.

-- Larry

[Kasper]

I'm sorry, you are right.
I meant if it was possible to change the content of infowindows and names of markers.
Is that possible, or does that happen automatically?

[I thought I tried that, but now I think of it, I didnt move the markers, I placed new ones...]

[geoco...@gmail.com]

On Nov 7, 9:07 am, Kasper <kaspervandel...@gmail.com> wrote:
> I'm sorry, you are right.
> I meant if it was possible to change the content of infowindows and names
> of markers.
> Is that possible, or does that happen automatically?

It is possible. It doesn't happen automatically, you need to write
your code to do that.

What do you mean by "names of markers"? Do you want to change the
tooltip (title property)? Do you want to change the name of the
javascript variable that references the marker?

-- Larry

[Kasper]

My apologies for being so vague.

I indeed want to change the title of a marker [the tooltip]. Besides that I also want to change the content of the infowindow.

This is the code I'm using now:

var infowindow0 = new google.maps.InfoWindow({ content: "content here" });
var marker0 = new google.maps.Marker({position: new google.maps.LatLng(.589552,4.981633), map: map, title: 'bart_de_bruin', icon: 'http://lyxdesign.nl/school/WebApp/media/TwitterMarker.png' });
google.maps.event.addListener(marker0, 'click', function() { infowindow0.open(map,marker0); });

The position can be changed by .setPosition, but for example, is there a similar function to change the InfoWindow content?
I'm not sure if I could just do this [redefining the variable?]:

infowindow0 = new google.maps.InfoWindow({ content: "content here" });

The event listener could be left out the update, but the rest...?

[Rossko]

> The position can be changed by .setPosition, but for example, is there a
> similar function to change the InfoWindow content?

You could have a look at the documentation, see if there wasa
'setContent' method?
http://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindow

[Kasper]

That looks exactly like what I'm looking for indeed.
I find that documentation so hard to find the required information in, that I prefer asking it on the forum.
There should be room for beginners question on a forum, right?

But thanks a lot! I can finish up my script now!

[Rossko]

> I find that documentation so hard to find the required information in, that
> I prefer asking it on the forum.

It's even possible to search and see if it has ever come up before
http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=change+the+InfoWindow+content&qt_g=Search+this+group

[Kasper]

Yeah, if you know what to look for, which I didn't really.

However, I'm going insane here, because I just cant get it to work...
At first I got loads of errors like I didnt close the arguments with an ), which I fixed by using setContent({ content: "text" });
Which is weird, because the documentation doesnt mention that the use of { } brackets is required...

I also sometimes get this error:

Fout: Ongeldige waarde voor eigenschap <content>: [object Object]
Bronbestand: http://maps.gstatic.com/cat_js/intl/nl_ALL/mapfiles/api-3/7/0/%7Bmain,geometry%7D.js
Regel: 28

That makes no sense at all, because my content is set up properly?
Atleast, I think so.
An example of the generated script can be:

infowindow4.setContent({ content: 'Wow, no bail, hij draait nu letterlijk de bak in.....gewoon tussen de inmates hoop ik, waar hij hoort, tussen de fellow moordenaars!!' });
marker4.setPosition(51.575180,5.066711);
marker4.setTitle({title: 'saskiatijger'});

or

infowindow1.setContent({ content: '<a href=\"http://www.twitter.com/N_ickster\" target=\"_blank\">@N_ickster</a> Dat dacht ik al ;-)' });
marker1.setPosition(51.586412,4.987198);
marker1.setTitle({title: 'jackyraimond'}); 

An example page of the generated script:

http://bit.ly/s5sYMh

Perhaps you can see something that is wrong?

The markers just won't move or change content...

[Rossko]

> Perhaps you can see something that is wrong?

Referring to the documentation,

infowindow4.setContent({ content: 'Wow, no bail, hij

draait ....' });
is wrong, try
infowindow4.setContent('Wow, no bail, hij draait ....');

[Kasper]

Ah cool, that fixed it!
Now, the position is giving problems...:

I now have tried:

marker6.setPosition('51.6063,4.7265');

and

marker6.setPosition(51.6063,4.7265);

Do I perhaps have to use setPosition(new google.maps.LatLng(51.6063,4.7265)); ?

[Rossko]

> Do I perhaps have to use setPosition(new google.maps.LatLng(51.6063,4.7265)); ?

Having tried the other things, why don't you try that?
Or search this group for 'setPosition' and see how other people use it?

[Kasper]

I tried several things but didn't get it to work. Searching on the forum didnt help a lot either, so I tried a bit more...
and got it to work with setPosition(new google.maps.LatLng(latitudefloat,longitudefloat))
yay :P