Geomashup 1.3 (update) – Dynamic Google map to display all your posts

Had time this weekend to update the tutorial for Geomashup with WordPress, which basically is a dynamic map CMS that can randomly show geolocated infowindows of your blog posts.

See here for Geomashup example There were a few variable name replacements (post _data to object_data, etc.) There is a solution for vertical offset for the infowindow, in case the map height has to be small and the tops of your infowindows are being cut off, this extra code is courtesy of Marcelo –

GeoMashup.addAction( 'loadedMap', function ( properties, map ) {
var shift = new GSize(0,-100)
GMap2.prototype.panShifted = function (latlon,sh) {
var z = map.getZoom();
var proj = this.getCurrentMapType().getProjection();
var px = proj.fromLatLngToPixel(latlon,z);
var sePx = new GPoint(px.x + sh.width, px.y + sh.height);
var seLatLng = proj.fromPixelToLatLng(sePx,z);
var counter = 0,
cancel = false,
infowindow = map.getInfoWindow(),
loopMap = function() {
if (++counter >= properties.object_data.objects.length) counter = 0;
GeoMashup.clickMarker( properties.object_data.objects[counter].object_id );
if ( ! cancel ) {
setTimeout(function() { loopMap(); },10000);
// If we don't have a request to open a post, start the tour
if ( ! properties.open_object_id ) {
setTimeout(function() { loopMap(); },10000);
// Center info windows when opened
google.maps.Event.addListener( map, 'infowindowopen', function() {
map.panShifted( infowindow.getPoint(),shift );
} );
// Cancel the tour if the info window is manually closed
google.maps.Event.addListener( infowindow, 'closeclick', function() {
cancel = true;
} );

Be Sociable, Share!
This entry was posted in Tutorials and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>