Google マップのマッシュアップを作成する最も簡単な方法は?
-
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/
乾杯ジョン