A few years ago, I made my first map mashup with Google Maps for Dallas Theological Seminary. It allows visitors to search for churches around the world where DTS alumni are serving. Recently, we decided to update the mashup with several features in mind:
- Larger map – 2 years ago we were using a 800px wide layout and now we can use a 1024px layout
- Use updated API – Google has changed APIs since then
- Implement other maps – Yahoo and Microsoft each have good points
- Use custom icons – we are not just showing churches now, but also schools and counselors
To handle all of this, especially the implementation of other multiple map engines, I chose to use mapstraction, a JavaScript layer which allows developers to program against a common API for all mapping engines. It turns these two proprietary mapping code blocks:
// Google maps specific code
var gmap = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
gmap.setCenter(new GLatLng(37.4419, -122.1419), 13);
var gmarker = new GMarker( new GLatLng(37.443, -122.166) );
gmap.addOverlay(gmarker);
// Microsoft Live maps specific code
mmap = new VEMap('map');
mmap.SetDashboardSize(VEDashboardSize.Normal);
mmap.LoadMap();
mmap.SetCenterAndZoom(new VELatLong(37.4419, -122.1419), 10);
var shape = new VEShape(VEShapeType.Pushpin, new VELatLong(37.443, -122.166));
map.AddShape(shape);
into this single common set of code:
// universal map API, just change 'google' to 'yahoo', 'microsoft', etc.
var mapstraction = new Mapstraction('map','google');
mapstraction.addControls({ pan: true, zoom: 'large', overview: false, scale: true, map_type: true });
mapstraction.setCenterAndZoom(new LatLonPoint(37.4419, -122.1419), 12);
var marker = new Marker(new LatLonPoint(37.443, -122.166));
mapstraction.addMarker(marker);
In addition to Microsoft, Yahoo, and Google maps, you also get free access to a 3D map called Freeearth which is an amazing implementation of a 3D globe map (like Google Earth) using Papervision3D.
Examples
Here are examples using all four mapping engines. The only unique code is the shadow on the icons under Google maps. Also, prototype (which is used throughout the site) is handling the AJAX calls.
Try it out
- Find a Church – Google, Microsoft, Yahoo, Freeearth3D
- Find a Counselor – Google, Microsoft, Yahoo, Freeearth3D
- Find a School – Google, Microsoft, Yahoo, Freeearth3D
- Old Find a Church page
Links
Hi All,
Am very new to this Google Map, am trying to move the Map image in a time interval basis, either the Map image or the Location Images, am able to plot the points in Google Map, using Lat/long, now i want to make animated replay in google map.
So help me to achive this in my project.
@Boby, you’ll need to use some setTimeout or setInterval functions and then fire the setCenter method on that interval.
How is the church database updated? I checked the two churches I call home (one in Dallas, one in CA) and both still have lead/head pastors listed who are no longer with the church.
@Sam, the alumni office updates the data about once a month. I’ll let them know the data needs a refresh. As long as those pastors have notified the alumni office of their new position, the map should show it.
Hmm, I’m not sure either have new positions. They may be in states of semi-retirement so I’m not sure if they would have let the alumni office know (it’s been about 1+ year(s) since they held their former positions).
John, thanks for leading me to the Mapstraction JavaScript. It’s a huge time saver, and really cleaned my code up.
Ken
I want to full working code for google maps please email me all file so that i can use this code .
Hi John
Great web site. One quick question, will it be possible for you to share the code for Church search App? I am trying to make a community based web site and I am really impressed with the search result pop up. I was looking for an example like this in dozens of GMap libraries, but yours is closest. And it looks like you are using Ajaxpro , which i have used in the past. Please email me the code if possible, it will be highly appreciated.