Geek Answers Handbook

The easiest way to create mashup in Google Map?

Given a list of locations such as

<td>El Cerrito, CA</td> <td>Corvallis, OR</td> <td>Morganton, NC</td> <td>New York, NY</td> <td>San Diego, CA</td>

What is the easiest way to create a Google map using the buttons for each location?

+7
html google-maps
source share
5 answers

I assume that you have the basics for Maps in your code already with your API key.

 <head> <script type="text/javascript" href="http://maps.google.com/maps? file=api&v=2&key=xxxxx"> function createMap() { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.44, -122.14), 14); } </script> </head> <body onload="createMap()" onunload="GUnload()">

Everything on Google Maps is based on latitude (lat) and longitude (lng).
Thus, to create a simple marker, you simply create a GMarker with lat and lng.

 var where = new GLatLng(37.925243,-122.307358); //Lat and Lng for El Cerrito, CA var marker = new GMarker(where); // Create marker (Pinhead thingy) map.setCenter(where); // Center map on marker map.addOverlay(marker); // Add marker to map

However, if you do not want to search Lat and Lng for each city, you can use Google Geo Coder. Here is an example:

 var address = "El Cerrito, CA"; var geocoder = new GClientGeocoder; geocoder.getLatLng(address, function(point) { if (point) { map.clearOverlays(); // Clear all markers map.addOverlay(new GMarker(point)); // Add marker to map map.setCenter(point, 10); // Center and zoom map on marker } });

So, I would just create a GLatLng array of each city from GeoCoder and then draw them on a map.

+10
source share

Check out the Google Maps API Examples. They make it pretty simple, and their API documentation is great. Most examples are designed to run all the code in JavaScript on the client side, but there are other APIs for other languages.

+8
source share

I think you will need more information to really give you an answer, but there is a django-googlemap plugin in Django Pluggables that can help.

Edit: Adam has a much better answer. When in doubt, look at API examples.

+1
source share

Try the following: http://www.google.com/uds/solutions/wizards/mapsearch.html

This is the google map wizard that will generate the code for you. Not the best for your application; but a good place to "raise your legs";)

Edit: (found a link), here's a good step-by-step tutorial on the Google Maps API .

Good luck

/ tr

+1
source share

Here are a few links, but, as in most cases, I have not yet tried to try them.

http://gathadams.com/2007/08/21/add-google-maps-to-your-net-site-in-10-minutes/

http://www.mapbuilder.net/

Cheers John

+1
source share

More articles:


All Articles