Google マップのマッシュアップを作成する最も簡単な方法は?

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

  •  08-06-2019
  •  | 
  •  

質問

次のような場所のリストが与えられると、

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

各場所のプッシュピンを使用して Google マップを生成する最も簡単な方法は何ですか?

役に立ちましたか？

解決

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 マップのすべては緯度 (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

ただし、各都市の緯度と経度を調べたくない場合は、Google の Geo Coder を使用できます。以下に例を示します。

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 の配列を作成し、地図上に描画するだけです。

他のヒント

をチェックしてください Google Maps API の例とてもシンプルで、API ドキュメントも充実しています。ほとんどの例は、クライアント側ですべてのコードを JavaScript で実行するものですが、他の言語用の API も利用できます。

実際に答えを得るにはさらに多くの情報が必要だと思いますが、Django Pluggables には次のような情報があります。 django-googlemap プラグイン それは役に立つかもしれません。

編集： アダムはもっと良い答えを持っています。疑問がある場合は、API の例を参照してください。

これを試して： http://www.google.com/uds/solutions/wizards/mapsearch.html

これは、コードを生成する Google マップ ウィザードです。あなたのアプリケーションには最適ではありません。しかし、「足を動かす」には良い場所です ;)

編集：(リンクを見つけました)、 これは、Google Maps API の段階的なチュートリアルです。

幸運を！

/mp

ここにいくつかのリンクがありますが、ほとんどのものと同様、まだ試してみることができません。

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

http://www.mapbuilder.net/

乾杯ジョン

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top