Problem with multiple markers and infowindows in Googlemaps API v3

[Txell]

'm quite new at Javascript and Google Maps but I could run the google
map that I was programming since I tried to show on the map more than
one marker, each one with different information (title, image, url
link) in the infowindow. I've searched on the net for the solution,
also in your related questions, and tried several solutions, but I'm
not able to find it. I post the code here (which is in the file
map.js), I guess that it must be a very silly mistake, but I can't see
it. I will really thank you if you could advise me.



enter code here (function() {

// Defining variables that need to be available to some functions
var map, infoWindow;

window.onload = function() {

// Creating a map
var options = {
zoom: 14,
center: new google.maps.LatLng(41.186, 1.0176),
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: true,
scaleControl: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: [
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.TERRAIN
]
}};

map = new google.maps.Map(document.getElementById('map'),
options);

//Afegir kml: http://code.google.com/apis/maps/documentation/javascript/overlays.html#KMLLayers
var ctaLayer = new google.maps.KmlLayer('http://dl.dropbox.com/u/
2697623/ReplaRocabrunaRepla_modif.kml');
ctaLayer.setMap(map);

var punts = [
{latitude: 41.17, longitude: 1.02, title: "Les Borges del Camp",
infoWindowContent: "<strong>Les Borges del Camp</strong><br/><div
id="info"><img src="img/borges.jpg" alt="" /><br/><a href=\"http://
www.lesborgesdelcamp.com\">Ajuntament de les Borges del Camp</a>"},
{latitude: 41.18, longitude: 1.0185, title: "Un altre punt",
infoWindowContent: "<strong>Un altre punt</strong><br/><div
id="info"><img src="img/borges.jpg" alt="" /><br /><a href=\"http://
www.google.com\">Ajuntament de les Borges del Camp</a>"},
];

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < punts.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(punts[i][1], punts[i][2]),
map: map
});

google.maps.event.addListener(marker, 'click', (function(marker,
i) {
return function() {
infowindow.setContent(punts[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

[geoco...@gmail.com]

On Sep 1, 5:00 am, Txell <guiatges.elbro...@gmail.com> wrote:
> 'm quite new at Javascript and Google Maps but I could run the google
> map that I was programming since I tried to show on the map more than
> one marker, each one with different information (title, image, url
> link) in the infowindow. I've searched on the net for the solution,
> also in your related questions, and tried several solutions, but I'm
> not able to find it. I post the code here (which is in the file
> map.js), I guess that it must be a very silly mistake, but I can't see
> it. I will really thank you if you could advise me.
>

Does this help:
http://www.geocodezip.com/v3_MW_example_map1.html

If not please follow the posting guidelines and post a link to your
map that shows the problem:
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

-- Larry

[Txell]

Hello again, I post here the link where I uplodaded the little web. I
couldn't do it last week because I couldn't upload the files anywhere.
I tried the solution you suggested, but it still doesn't work! I guess
it must be some little error in the code, but can't find the mistake.
Thanks for your help!

http://www.elbrogit.com/tl_files/BrogitGuiatges/Prova_Borges/index.html

[Txell]

Hello,

it seems I'm having problems posting a message in the google groups
forum. So I try a direct mail. Finally, I've been able to upload the
files to the net, I post the link here:

http://www.elbrogit.com/tl_files/BrogitGuiatges/Prova_Borges/index.html

I've tried the solution you suggested but it still doesn't work, can't
understand why! I guess there must be an error in the code, but can't
see it after reading it a lot of times. I will really thank you for
your help!

On 1 Set, 14:58, "geocode...@gmail.com" <geocode...@gmail.com> wrote:

> On Sep 1, 5:00 am, Txell <guiatges.elbro...@gmail.com> wrote:
>
> > 'm quite new at Javascript and Google Maps but I could run the google
> > map that I was programming since I tried to show on the map more than
> > one marker, each one with different information (title, image, url
> > link) in the infowindow. I've searched on the net for the solution,
> > also in your related questions, and tried several solutions, but I'm
> > not able to find it. I post the code here (which is in the file
> > map.js), I guess that it must be a very silly mistake, but I can't see
> > it. I will really thank you if you could advise me.
>
> Does this help:http://www.geocodezip.com/v3_MW_example_map1.html
>
> If not please follow the posting guidelines and post a link to your

[Txell]

Hello again,

Here I post the link, I didn't post it last week because I just
couldn't upload the files anywhere! I tried the code you suggested,
but I still can't see the map! I guess it must be some easy detail on
the code, but after reading it all again and again, I can't find the
mistake! Thanks a lot for your help!

http://www.elbrogit.com/tl_files/BrogitGuiatges/Prova_Borges/index.html

On 1 Set, 14:58, "geocode...@gmail.com" <geocode...@gmail.com> wrote:

> On Sep 1, 5:00 am, Txell <guiatges.elbro...@gmail.com> wrote:
>
> > 'm quite new at Javascript and Google Maps but I could run the google
> > map that I was programming since I tried to show on the map more than
> > one marker, each one with different information (title, image, url

> > link) in theinfowindow. I've searched on the net for the solution,

[Rossko]

> http://www.elbrogit.com/tl_files/BrogitGuiatges/Prova_Borges/index.html

My browser reports ascript error about a missing bracket in
mapa_BorgesCamp.js
The first line looks a bit suspect
(function() {

[Txell]

Hello,

the first ( is to encapsulate the function, following the advices of
Svenneberg in his book... I don't get any error in my browser, apart
from an undefined Uncaught SyntaxError: Unexpected end of input, which
I've also tried to solve, but can't get rid of it!

In fact, I was using all his code to build the map and everything
worked great till I tried to use multiple markers with different
information for each to show in the infowindow.

Thanks for your help!

[Rossko]

> I don't get any error in my browser, apart
> from an undefined Uncaught SyntaxError: Unexpected end of input, which
> I've also tried to solve, but can't get rid of it!

Well, you do get an error then. I have given you a clue.

Here are some more clues
http://www.google.com/search?q=Uncaught+SyntaxError%3A+Unexpected+end+of+input

[geoco...@gmail.com]

On Sep 6, 7:12 am, Txell <guiatges.elbro...@gmail.com> wrote:
> Hello,
>
> the first ( is to encapsulate the function, following the advices of
> Svenneberg in his book... I don't get any error in my browser, apart
> from an undefined Uncaught SyntaxError: Unexpected end of input, which
> I've also tried to solve, but can't get rid of it!
>
> In fact, I was using all his code to build the map and everything
> worked great till I tried to use multiple markers with different
> information for each to show in the infowindow.

Where is that map where it "worked great"? I suspect you have changed
more than you think.

Currently:
1. I don't get an error but the window onload event isn't firing
2. you have an extra comma at the end of your marker object
definition, that won't work in IE.
3. your code is looking for:
map = new google.maps.Map(document.getElementById('mapa_BorgesCamp')
but that div doesn't exist on that page, it contains this one:
<div id="map"></div>
4. when I fix those your map has zero size
5. when I give it a size, I see a map with 2 markers with unique
infowindow content.

-- Larry

[Txell]

First of all, thanks a lot for your help! It's getting more difficult
than I expected to understand all this code! I followed your
suggestions, but still doesn't work, I couldn't even see the frame of
the map. I changed the name from mapa_BorgesCamp back to map, but I
only can see the frame. I'm getting desperated because I don't
understand what isn't working. Also, I don't understand why should I
give size to the map in the index, because I already set the size in
map.js. I tried to see it in Firefox (I always use Chrome) but can't
see the map either.

I've compared my code with working examples again, but still can't see
the problem. And can't undersand why the window onload isn't firing,
because I just wrote the code as in other working examples. You may
think I'm blind or stupid, but I'm just unable to solve the whole
problem! :-( I would love to see the map with the 2markers with unique
infowindow content!

http://www.elbrogit.com/tl_files/BrogitGuiatges/Prova_Borges/index.html

On 6 Set, 15:56, "geocode...@gmail.com" <geocode...@gmail.com> wrote:
> On Sep 6, 7:12 am, Txell <guiatges.elbro...@gmail.com> wrote:> Hello,
>
> > the first ( is to encapsulate the function, following the advices of
> > Svenneberg in his book... I don't get any error in my browser, apart
> > from an undefined Uncaught SyntaxError: Unexpected end of input, which
> > I've also tried to solve, but can't get rid of it!
>
> > In fact, I was using all his code to build the map and everything

> > worked great till I tried to usemultiplemarkerswith different

> > information for each to show in the infowindow.
>
> Where is that map where it "worked great"?  I suspect you have changed
> more than you think.
>
> Currently:
> 1. I don't get an error but the window onload event isn't firing
> 2. you have an extra comma at the end of your marker object
> definition, that won't work in IE.
> 3. your code is looking for:
> map = new google.maps.Map(document.getElementById('mapa_BorgesCamp')
> but that div doesn't exist on that page, it contains this one:
> <div id="map"></div>
> 4. when I fix those your map has zero size

> 5. when I give it a size, I see a map with 2markerswith unique

[geoco...@gmail.com]

On Sep 8, 3:06 am, Txell <guiatges.elbro...@gmail.com> wrote:
> First of all, thanks a lot for your help! It's getting more difficult
> than I expected to understand all this code! I followed your
> suggestions, but still doesn't work, I couldn't even see the frame of
> the map. I changed the name from mapa_BorgesCamp back to map, but I
> only can see the frame. I'm getting desperated because I don't
> understand what isn't working. Also, I don't understand why should I
> give size to the map in the index, because I already set the size in
> map.js.

I didn't see that (and I can't see your code right now and my working
example is on a different computer...)

> I tried to see it in Firefox (I always use Chrome) but can't
> see the map either.
>
> I've compared my code with working examples again, but still can't see
> the problem. And can't undersand why the window onload isn't firing,
> because I just wrote the code as in other working examples. You may
> think I'm blind or stupid, but I'm just unable to solve the whole
> problem! :-( I would love to see the map with the 2markers with unique
> infowindow content!

I had to remove your "wrapper" function to get the onload event to
fire. I just went through the steps I mentioned above and it did
work.

>
> http://www.elbrogit.com/tl_files/BrogitGuiatges/Prova_Borges/index.html

This file doesn't exist (at least according to Chrome):
http://www.elbrogit.com/tl_files/BrogitGuiatges/Prova_Borges/js/mapa_BorgesCamp.js
so your map doesn't do anything useful for me now.

I will post my copy when I get to the computer it is on when I have
time.

-- Larry

[Txell]

Ok, thanks for posting your working copy! Because I removed the
wrapper and didn't work either. I'm doing something stupid and wrong,
but can't get what!

Thanks a lot again!

On 8 Set, 11:55, "geocode...@gmail.com" <geocode...@gmail.com> wrote:
> On Sep 8, 3:06 am, Txell <guiatges.elbro...@gmail.com> wrote:
>
> > First of all, thanks a lot for your help! It's getting more difficult
> > than I expected to understand all this code! I followed your
> > suggestions, but still doesn't work, I couldn't even see the frame of
> > the map. I changed the name from mapa_BorgesCamp back to map, but I
> > only can see the frame. I'm getting desperated because I don't
> > understand what isn't working. Also, I don't understand why should I
> > give size to the map in the index, because I already set the size in
> > map.js.
>
> I didn't see that (and I can't see your code right now and my working
> example is on a different computer...)
>
> > I tried to see it in Firefox (I always use Chrome) but can't
> > see the map either.
>
> > I've compared my code with working examples again, but still can't see
> > the problem. And can't undersand why the window onload isn't firing,
> > because I just wrote the code as in other working examples. You may
> > think I'm blind or stupid, but I'm just unable to solve the whole
> > problem! :-( I would love to see the map with the 2markers with unique
> > infowindow content!
>
> I had to remove your "wrapper" function to get the onload event to
> fire.  I just went through the steps I mentioned above and it did
> work.
>
>
>
> >http://www.elbrogit.com/tl_files/BrogitGuiatges/Prova_Borges/index.html
>

> This file doesn't exist (at least according to Chrome):http://www.elbrogit.com/tl_files/BrogitGuiatges/Prova_Borges/js/mapa_...

[geoco...@gmail.com]

On Sep 8, 4:22 am, Txell <guiatges.elbro...@gmail.com> wrote:
> Ok, thanks for posting your working copy! Because I removed the
> wrapper and didn't work either. I'm doing something stupid and wrong,
> but can't get what!

Well... as I said above, currently you have this problem on your
online version:

Not Found
The requested URL /tl_files/BrogitGuiatges/Prova_Borges/js/
mapa_BorgesCamp.js was not found on this server.

Without the javascript the map won't work. And I couldn't recreate my
version on a different computer without writing it from scratch.

-- Larry

> > > > > >      (function() {- Hide quoted text -
>
> - Show quoted text -

[geoco...@gmail.com]

On Sep 8, 8:20 am, "geocode...@gmail.com" <geocode...@gmail.com>
wrote:

> On Sep 8, 4:22 am, Txell <guiatges.elbro...@gmail.com> wrote:
>
> > Ok, thanks for posting your working copy! Because I removed the
> > wrapper and didn't work either. I'm doing something stupid and wrong,
> > but can't get what!
>
> Well... as I said above, currently you have this problem on your
> online version:
>
> Not Found
> The requested URL /tl_files/BrogitGuiatges/Prova_Borges/js/
> mapa_BorgesCamp.js was not found on this server.
>
> Without the javascript the map won't work.  And I couldn't recreate my
> version on a different computer without writing it from scratch.

My test/proof of concept page:
http://www.geocodezip.com/elbrogit_com_Prova_BorgesA.html

[Txell]

Great! It's definetely working now, just removed the first function
and changed the name of the .js. And it's working great! Thanks a lot
for your patience! Have a nice day!