How to dynamically add/remove Markers

2,971 views
Skip to first unread message

Yurehi

unread,
Aug 6, 2010, 4:40:48 PM8/6/10
to Google Maps JavaScript API v3
Hi,

I'm looking for some advice on how to do something specific using
Google Maps.

Basically I want to display just 1 primary map on a web page with a
static custom Marker icon placemark always showing on NY.

I then want to have a bunch of links on the page, where depending on
whichever one is clicked each would add any number of a group of
additional custom placemark marker icons along with the constantly
displayed NY one and remove any added markers from previously clicked
links.

So for example - My map loads showing the NY placemark custom icon
marker, then the user clicks on one of the links and different custom
icon markers for California and France placemarks are added to the NY
one. (California -Red Icon / France -Green Icon)

Then if the user clicks on another link, the previously added custom
placemark icon markers for (CA -Red Icon & FR -Green Icon ) are
removed ( * but The NY marker always remains) and then new ones for
Chicago and Japan are now added to NY. (Chicago- Blue Icon / Japan -
Green Icon) and so on and so on etc.

I'd like to be able to do this perhaps ideally with a javascript
function that would accept simple short arguments specifying which
custom marker icon for each placemark and the abbreviated name of each
marker , something like - onClick functionname(Red-Icon,CA,Blue-
Icon,FR,Green-Icon,JP) with the idea that I hopefully would'nt have to
hardcode each OnClick function link on the page.

Grok Lobster

unread,
Aug 7, 2010, 12:16:49 AM8/7/10
to Google Maps JavaScript API v3
Yes, you can do all that without too much trouble. When you add your
groups of markers, keep track of each group in an array. Then to
remove a group do something like this

for (var n = 0; n < oMarkers.length; n++) {
oMarkers[n].setMap(null);
}

In your onClick function to load the markers, just pass the state,
country or whatever and handle the color/icon part in the function.

if(CA) {
image = myImage1
}

and there are other ways to handle that.

Yurehi

unread,
Aug 8, 2010, 8:07:26 PM8/8/10
to Google Maps JavaScript API v3
Thanks very much for the tip which I did use.

Despite my limited comprehension of Javascript, I was able to crudely
hack my way through "Using the Associative arrays and Custom Icons"
tutorial. l've now successfully managed to get my map to show the one
static primary marker and toggle between different groups of other
markers, with each individual marker having a custom icon. I am
reading all of the data from an xml file, as demonstrated in the
tutorial.

However I now have a follow up question if anyone may have some
additional tips:

Is there a way in which I could possibly create a Javascript function,
whers an OnClick event would send Geocoded requests and return the
groups of markers for the various requested groups of 3 or 4 places
simultaneously (exp. France/Japan/California)?

I know with the Static Maps HTTP requests you are able to return
multiple markers from the string parameters using abbreviated codes
separated by the "|" character delimiter. For example like :
http://maps.google.com/maps/api/staticmap?&sensor=false&size=250x250&markers=FR|JP|CA

So would there possibly be a way in which I could have a Javascript
function similarly do this (returning my groups of markers), ideally
where perhaps I could simply call my function from some onClick event
using the abbreviated country/state place codes? Like for example
"onClick=myFunction('FR|JP|CA'};" and send those groups to the Geocode
request parameters at - http://maps.google.com/maps/api/geocode/output?parameters
and then return markers for France, Japan and California?

Because that way then I think I wouldn't have to therefore bother with
updating my .xml file with all my groups.
I could just tie whichever groups I want to the simple Javascript
function for each various onClick event etc.

If anyone has any ideas I really appreciate it.

Thank you

Yurehi

unread,
Aug 11, 2010, 3:31:57 AM8/11/10
to Google Maps JavaScript API v3
I have been testing out my map which is based on the tutorial example
here -
http://econym.org.uk/gmap/example_categories.htm

This example showed how to display grouped markers by category.
It loads the markers data from this xml file:
http://econym.org.uk/gmap/categories.xml

The problem I am having now is that despite carefully placing Lat,
Long coordinates in my xml file,
the markers show up in incorrect places.

To test it - For example I simply modified the tutorial example xml
file 'categories.xml"
by replacing the first markers Lat & Long with that for NY at:
40.738205, -74.008255
But the marker gets placed somewhere in Antarctica rather than NY.

Could someone possibly tell me why this error would happen?


Rossko

unread,
Aug 11, 2010, 3:43:47 AM8/11/10
to Google Maps JavaScript API v3
> by replacing the first markers Lat & Long with that for NY at:
> 40.738205, -74.008255
> But the marker gets placed somewhere in Antarctica rather than NY.
>
> Could someone possibly tell me why this error would happen?

You've done something wrong. The examples work. Can't tell what
you've done wrong, only you can see what you've done.
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e
I would guess that reversing the lat and long for NY would be a point
in Antartica though.

geoco...@gmail.com

unread,
Aug 11, 2010, 8:55:15 AM8/11/10
to Google Maps JavaScript API v3
On Aug 11, 12:31 am, Yurehi <gur...@gmail.com> wrote:
> I have been testing out my map which is based on the tutorial example
> here -http://econym.org.uk/gmap/example_categories.htm
>
> This example showed how to display grouped markers by category.
> It loads the markers data from this xml file:http://econym.org.uk/gmap/categories.xml

Just a word of warning, this group is for v3 of the API, those
examples are v2 examples. If you are using v2 that group is:
http://groups.google.com/group/google-maps-api/topics

v3 and v2 are fairly different.

-- Larry
Reply all
Reply to author
Forward
0 new messages