JavaScriptのリンクを使用してマーカーを拡大する

Question

私はGoogleマップとJavaScriptの初心者です。

Maps API V3を使用してGoogleマップにランダムなマーカーを作成しています。すべてのマーカーIDを含む側にリストを作成したいので、マーカーIDをクリックすると地図が表示されますマーカー。特に私はjavascriptの

にそのリンクを作成する方法を知りたい

Answer 1

この答えは初心者から初心者までです;）私はまだ私は「より多くの基本を表示したいのですが、簡潔かつ閉鎖のアプリケーションのためのbenastanの答えが好き"関数を書くことでアプローチします。

私はクロージャと関数スコープについて話す資格はありませんが、ループや関数内で呼び出された関数から予期せぬ動作が発生するのを経験した経験から言うことができます。このようなバグの1つは、ループ反復子の値がすべて同じ値（最後の反復）になるか、または未定義になる可能性があります。 (my own example)

完全なコードへのリンク：マーカーを配置するマップ上のhttp://jsfiddle.net/WaWBw/

]をクリックすると、側にマーカーやリンクをクリックすると、ズームイン

function addMarker(pos) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: pos 
    }); 
    markers.push(marker); 
    count = markers.length - 1; 
    addMarkerListener(marker, count, 6); 
    makeDiv(count, 4, "Marker #"); 
    count++; 
    } 

    function addMarkerListener(marker, index, zoomLevel) { 
    google.maps.event.addListener(marker, 'click', function(event) { 
     zoomIn(index, zoomLevel); 
    }); 
    } 

    function makeDiv(index, zoomLevel, content) { 
    document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>'; 
    } 

    function zoomIn(index, zoomLevel) { 
    map.setCenter(markers[index].getPosition()); 
    map.setZoom(zoomLevel); 
    } 

。

Answer 2

あなたは緯度/経度のセット座標持っていると言うあなたに感謝：座標による

var coords = [[32, -70], [50, -10], [0, 20]]; 

ループ、あなたの上のマーカーをプロットリストアイテムをマップして生成する。同時にでクリックハンドラをバインドします

var tpl = '<a href="javascript: void(0)">Click here to view a point</a>'; 
// Loop through coordinates. 
for (var i in coords) { 
    // Create a closure. 
    (function() { 
     var pt = coords[i], 
      latlng = new google.maps.LatLng(pt[0], pt[1]), 
      marker = new google.maps.Marker({ 
       position: latlng, 
       map: map // variable containing your google map. 
      }), 
      elm = document.createElement('li'); 
     elm.innerHTML = tpl; 
     // When you click the list item, set map center to latlng of marker. 
     elm.onclick = function() { 
      map.setCenter(latlng); 
     }; 
     document.body.appendChild(elm); 
    })(); 
}