をマッピングし、私は私の会社の地方事務所の複数の場所があり、ユーザーはのような場所でクリックするたびに、それぞれの場所を表示する必要があります。JavascriptをGoogleが
場所1
LOCATION2
LOCATION3
ユーザーが場所1でクリックします地図上に位置1が表示されます。私はまた、私の地図にそれらの場所を持っています。私はこれまでGoogleマップで作業したことがないので、始めにいくつかのアイデアが必要です。
をマッピングし、私は私の会社の地方事務所の複数の場所があり、ユーザーはのような場所でクリックするたびに、それぞれの場所を表示する必要があります。JavascriptをGoogleが
場所1
LOCATION2
LOCATION3
ユーザーが場所1でクリックします地図上に位置1が表示されます。私はまた、私の地図にそれらの場所を持っています。私はこれまでGoogleマップで作業したことがないので、始めにいくつかのアイデアが必要です。
ユーザーがリンクをクリックすると、マップ上のsetCenter(latlng:LatLng)を呼び出すjavascriptを実行して、マップを特定の場所に集中させます。
どこから始めるべきかわからない場合は、Google Maps APIのドキュメントを読んで始めてください。読むのは簡単ですし、多くの作業が含まれていますexamples。
おかげで助けになりました:) – MNet
あなたはこのような何かを行うことができます。(私は
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() { //Initalize JS after onload
var map = new google.maps.Map(document.getElementById('map_canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var randomPoint1 = new google.maps.LatLng(44.6479, -63.5744); //First Location
var marker1 = new google.maps.Marker({ //Set up marker
position: randomPoint1,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid1'), 'click', //Set up DOM listener 1
function(){
map.setZoom(13);
map.setCenter(marker1.getPosition());
});
var randomPoint2 = new google.maps.LatLng(45.5081, -73.5550); //Second Location
var marker2 = new google.maps.Marker({
position: randomPoint2,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid2'), 'click',//Set up DOM listener 2
function(){
map.setZoom(13);
map.setCenter(marker2.getPosition());
});
var randomPoint3 = new google.maps.LatLng(43.6481, -79.4042); //Third Location
var marker3 = new google.maps.Marker({
position: randomPoint3,
map: map
});
google.maps.event.addDomListener(document.getElementById('locationid3'), 'click', //Set up DOM listener 3
function(){
map.setZoom(13);
map.setCenter(marker3.getPosition());
});
map.setCenter(marker2.getPosition());
map.setZoom(5);
}
</script>
</head>
<body onload="initialize()"> <!--Initalize JS after onload--->
<a href="#" id="locationid1">Halifax</a>
<a href="#" id="locationid2">Montreal</a>
<a href="#" id="locationid3">Toronto</a>
<div id="map_canvas" style="height:100%; width:100%"></div>
</body>
</html>
をその初期/後期今、それはループのために最適化できると確信していると私はこれを書いた後、私はポストからだった実現
あなたはする必要はありません同様の操作を明示的に繰り返します。 [ここには例があります](http://www.geocodezip.com/v3_MW_example_map2.html)は、マーカー(およびサイドバーの項目も作成するための機能を使用しています。 –
申し訳ありませんが、私はそれについて今すぐに感謝の相手に感謝します:) – MNet