制作Google Map mashup的最简单方法是什么?

时间:2008-08-18 21:26:58

标签: html google-maps

给出一个位置列表,例如

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

使用每个位置的图钉生成Google地图的最简单方法是什么?

5 个答案:

答案 0 :(得分:10)

我假设您的代码中已经有了使用API​​密钥的地图基础知识。

<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()">

Google地图中的所有内容均基于纬度(纬度)和经度(lng) 因此,要创建一个简单的标记,您只需使用lat和lng创建一个GMarker。

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

但是,如果您不想查看每个城市的Lat和Lng,您可以使用Google的地理编码器。下面是一个例子:

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
  }
});

所以我只想从GeoCoder创建一个每个城市的GLatLng数组,然后在地图上绘制它们。

答案 1 :(得分:8)

查看Google Maps API Examples 他们使它非常简单,他们的API文档很棒。 大多数示例都是在客户端使用JavaScript执行所有代码,但也有其他语言的API可用。

答案 2 :(得分:1)

我想更多的信息需要真正给你一个答案,但在Django Pluggables上有一个django-googlemap plugin可能会有所帮助。

编辑:Adam有更好的答案。当它怀疑看API的例子。

答案 3 :(得分:1)

试试这个:http://www.google.com/uds/solutions/wizards/mapsearch.html

这是一个谷歌地图向导,它将为您生成代码。不适合您的应用;但是“让你的脚湿透”的好地方;)

修改:(找到链接),here's a good Google Maps API stepwise tutorial.

祝你好运!

/ MP

答案 4 :(得分:1)

以下是一些链接,但与大多数事情一样,我还没有尝试过它们。

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

http://www.mapbuilder.net/

干杯 约翰