I've been playing with creating a framework for easy mashups, starting with a little Yahoo! Pipes, and the using the data generated with other web services. One of these services was Google Maps. I went out and got my Maps API developer key and started hacking. After doing a few good little tests, I got to what I really wanted to try out: a mashup that'll help my wife and I find a new apartment by taking all the craigslist postings, pare it down to the number of bedrooms we need, the fact that we have a puppy that needs a yard, the area that we want to live, and post all the good matches to a Google map.
After I got the whole map set up, I found that Firebug was showing a javascript error 'a has no properties' There are tons of people asking the question, and the answers aren't quite as plentiful. In fact, most people recommended switching the API version from 2 to 2.s (whatever that means). All that did was get me a 'has no properties' for a different variable. My code looked like this (ignore the Django markup):
<script type="text/javascript">
//<![CDATA[
function loadpoints() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.enableDragging();
map.enableScrollWheelZoom();
map.setCenter(new GLatLng({{lat}}, {{lon}}), 11);
{% for location in locations %}
{% if location.geo_long %}
point = new GLatLng({{location.geo_lat}}, {{location.geo_long}});
marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
var content = '<a href="{{location.link}}">{{location.title}}</a>';
marker.openInfoWindowHtml(content);
});
map.addOverlay(marker);
{% endif %}
{% endfor %}
}
}
//]]>
</script>
I went through and commented out lines of javascript a bit at a time. I eventually found the issue, but it was quite a pain, and quite undocumented. The issue is this: I created my map, add some controls, set the center of the map to a GLatLng, and then started adding markers. Well, apparently, the first thing that needs to be done to a map is to set the center of the map. I couldn't find any documentation to reflect that, but it's the only way my mashup would work. So now, my code looks like this:
<script type="text/javascript">
//<![CDATA[
function loadpoints() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng({{lat}}, {{lon}}), 11);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.enableDragging();
map.enableScrollWheelZoom();
{% for location in locations %}
{% if location.geo_long %}
point = new GLatLng({{location.geo_lat}}, {{location.geo_long}});
marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
var content = '<a href="{{location.link}}">{{location.title}}</a>';
marker.openInfoWindowHtml(content);
});
map.addOverlay(marker);
{% endif %}
{% endfor %}
}
}
//]]>
</script>
After looking through the documentation, it appears that the GMap2 constructor could take a opts.center option on instantiation, but it's not completely clear, and I'm far too lazy to actually try it out. Regardless, my rental mashup is working now, and I've got enough information to start working on my mashup framework, so that's all the information I need.
