Simplest way to make a Google Map mashup?

StackOverflow https://stackoverflow.com/questions/15247

  •  08-06-2019
  •  | 
  •  

Question

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's the easiest way to generate a Google Map with pushpins for each location?

Was it helpful?

Solution

I'm assuming 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 in Google Maps is based off of latitude (lat) and longitude (lng).
So to create a simple marker you will just create a GMarker with the 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 don't want to look up the Lat and Lng for each city you can use Google's Geo Coder. Heres 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 an array of GLatLng's of every city from the GeoCoder and then draw them on the map.

OTHER TIPS

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

I guess more information would be needed to really give you an answer, but over at Django Pluggables there is a django-googlemap plugin that might be of help.

Edit: Adam has a much better answer. When it doubt look at the API examples.

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

It's a google maps wizard which will generate the code for you. Not the best for your application; but a good place to "get your feet wet" ;)

Edit: (found the link), here's a good Google Maps API stepwise tutorial.

Good luck!

/mp

Here are some links but as with most things i have not got round to trying them yet.

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

http://www.mapbuilder.net/

Cheers John

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top