Simplest way to make a Google Map mashup?

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.


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.


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.

Tags:

Html

Google Maps

Recent Posts