Converting from API v2 to API v3 and MarkerClusterer (v3)

719 views
Skip to first unread message

Derek Tonn

unread,
Jul 15, 2011, 4:40:49 PM7/15/11
to Google Maps JavaScript API v3
Hello everyone!

I'm having a bit of an issue with a webpage on my Ning Social Network
that I've created pro-bono for our small community:
http://www.springfieldmnchamber.org/pages/springfieldmnmap

Inside of Ning, they offer something called Domain Mapping.
Basically, the ability to have yoursite.ning.com display (and
function) as yoursite.com. Anyway, when I established domain mapping
for my site, it broke the simple markerclusterer v2 map I had set up
for our community. Basically, continually asking me for a new v2 API
key...which I tried to install to no avail. I then was told that if I
could convert from v2 to v3 in the API, I would no longer need an API
key. I thought it was a good excuse to move everything into v3, so I
downloaded a copy of the markercluster v3 script and visited and tried
to implement the new Maps API v3 code via reviewing:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

I now have a shiny white paperweight staring back at me...instead of a
shiny white paperweight with errors telling me to get a new (v2) API
key! :-) I'm sure it is due to my lack of expertise related to the
Maps API...and I'm probably accidentally mixing just a bit of v2 and
v3 code/calls in my page code (the source code for the link in the
first sentence of this post. That said, if anyone out there could
take pity on me and take a quick look to see if anything is obviously
wrong, I would be grateful. I've been wrestling with this issue for
at least 20-25 hours so far, with no hope of resolution in site.

The markerclusterer.js code called by the page should be fine! It's
the bit of script calling Google Maps and the marker information that
seems to be causing the problems.

Thanks! Have a wonderful weekend. - Derek

Ralph Ames

unread,
Jul 15, 2011, 7:16:00 PM7/15/11
to google-map...@googlegroups.com
>>That said, if anyone out there could
>>take pity on me and take a quick look to see if anything is obviously
>>wrong, I would be grateful. I've been wrestling with this issue for
>>at least 20-25 hours so far, with no hope of resolution in site.

http://www.mapformation.com/portfolio/mashups/springfieldMN/markerclusterer.
js
http://www.mapformation.com/portfolio/mashups/springfieldMN/data.js

These links return a 404 error, Page Not Found.

-
www.easypagez.com/maps/map_index.html
www.easypagez.com/maps/v3_basicmap.html

Ralph


Rossko

unread,
Jul 15, 2011, 8:19:48 PM7/15/11
to Google Maps JavaScript API v3
> http://www.springfieldmnchamber.org/pages/springfieldmnmap

Find out how to see the javascript errors your browser reports ; I
get
missing } after property list
at this line
map.addControl(new GLargeMapControl());
and sure enough the preceding line is missing a curly bracket amnongst
other things.

You have quite a bit of work to do yet ; there are no Gxxx methods in
v3 API so there is a lot of your code to convert yet. You can't just
change the v2 API script load to v3 and run the same code, it is
different functionality with different syntax.

You must also load the MarkerCluster script after the maps API, not
before.

Derek Tonn

unread,
Jul 15, 2011, 9:21:14 PM7/15/11
to google-map...@googlegroups.com
Thank you, Rossko. I ran that page through the developer tools built
into Google Chrome...and it's showing two script errors when executing
the page:

Line 193: Uncaught ReferenceError: i is not defined
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ =

'http://www.mapformation.com/images/portfolio/interactive/mashups/basic/markerclusterer/m/'
+
+ i + '.png'; <-- HERE

Line 329: Uncaught SyntaxError: Unexpected identifier
map.addControl(new GLargeMapControl()); <-- HERE
map.addControl(new GMapTypeControl());

My guess is that on the GLargeMapControl control, it shouldn't be there
anymore (along with the GMapTypeControl reference). Related to not
defining "i," I'm not so sure. I did also move the markerclusterer
script after the maps script. Thanks for that.

Also, thank you to Ralph for your previous response as well. I forgot
that I had copied in a bit of old code when modifying that page. The
links are no longer broken, and I still have a shiny white paperweight
staring back at me. :-)

Have a wonderful evening! - Derek

Ralph Ames

unread,
Jul 15, 2011, 9:58:11 PM7/15/11
to google-map...@googlegroups.com
>>http://www.springfieldmnchamber.org/pages/springfieldmnmap

This seems to be not quite right:-

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: center,

Should be like this:-

var myOptions = {
zoom: 15,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map"), myOptions);

and as an example this should be:-

var marker = new GMarker(point, {icon:icon});

something like this:-

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

The syntax for icons has also changed.

http://code.google.com/apis/maps/documentation/javascript/overlays.html#Icon
s


Ralph
-
www.easypagez.com/maps/map_index.html
www.easypagez.com/maps/v3_basicmap.html


Daejeon

unread,
Jul 16, 2011, 12:39:03 AM7/16/11
to google-map...@googlegroups.com
Sorry, I would like to post my question here regarding clustering as well. Hope you don't mind. 
I downloaded markercluster v3 script as well and reviewing this example: 

All works fine when I try to run the code exactly the same from the link above. however, when I try load my own data from XML file , instead of data.json by the code following: 

            downloadUrl("XML file/xml.xml", function(data) {
                var markers = data.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                    var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
                    var marker = new google.maps.Marker({
                    position: latLng,
                });
                
                Arraymarkers.push(marker);
                } //end for
            });

            var markerCluster = new MarkerClusterer(map, Arraymarkers);
        }

Daejeon

unread,
Jul 16, 2011, 12:42:09 AM7/16/11
to google-map...@googlegroups.com
The marker just wont show. Anyone knows what could be the possible problem? 
Thank you very much. 

Rossko

unread,
Jul 16, 2011, 5:13:38 AM7/16/11
to Google Maps JavaScript API v3
> Anyone knows what could be the possible problem?

Yes. It's nothing to do with problems the OP is having here. It's
because downloadUrl() is asynchronous in nature.

Daejeon

unread,
Jul 16, 2011, 5:37:10 AM7/16/11
to google-map...@googlegroups.com
Thanks Rossko for the answer, however...some how it works in IE. >.<
I have just tried. The exactly the same code, the markers and the clustering markers both shows up in IE but Chrome.... >.<
>.< >.< >.<  ..What's the problem..  >.< >.< >.<
Do you have any idea, what's going on?? 
 

Thanks for the help =) 

Rossko

unread,
Jul 16, 2011, 6:21:56 AM7/16/11
to Google Maps JavaScript API v3
> Thanks Rossko for the answer, however...some how it works in IE.

Then it's time to follow the posting guidelines, start your own new
thread since it has nothing to do with this one, and also give a link
to your map that is having problems.
Reply all
Reply to author
Forward
0 new messages