0

新しいマーカーをマップに追加するにはどうすればよいですか? マップを表示することはできましたfunction startGoogleMaps() が、機能 ( onclick()) が機能しません。

function startGoogleMaps(){    
    var map = new google.maps.Map(document.getElementById('canvasMap'), {
        zoom: 5,
        center: initCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });            
}

document.getElementById("testButton").onclick = function(){
    var marker = new google.maps.Marker({
      position: (37, -97),
      map: map,
      title:"Hello World!"});
}
4

2 に答える 2

2

mapクリック イベントをバインドしているのと同じスコープでオブジェクトを定義してみてください。

var map = null;

function startGoogleMaps(){    
    map = new google.maps.Map(document.getElementById('canvasMap'), {
        zoom: 5,
        center: initCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });            
}

document.getElementById("testButton").onclick = function(){
    var marker = new google.maps.Marker({
      position: (37, -97),
      map: map,
      title:"Hello World!"});
}

また、次のインスタンスとして位置を渡す必要があることに注意してくださいgoogle.maps.LatLng。

      ...
      position: google.maps.LatLng(37, -97),
      ...
于 2012-10-22T21:58:38.423 に答える
1

Javascript は機能範囲を使用することに注意してください。map次のようにグローバルに宣言する必要があります。

var map;

function startGoogleMaps(){    
    map = new google.maps.Map(document.getElementById('canvasMap'), {
        zoom: 5,
        center: initCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });            
}

document.getElementById("testButton").onclick = function(){
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(37, -97),
      map: map,
      title:"Hello World!"});
}

さらに、マーカー自体がマップの範囲外にある可能性があるため、 を使用map.fitBoundsして適切に表示できます。

document.getElementById("testButton").onclick = function(){
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(37, -97),
      map: map,
      title:"Hello World!"});

    var latlngbounds = new google.maps.LatLngBounds();
    latlngbounds.extend(new google.maps.LatLng(37, -97));
    map.fitBounds(latlngbounds);
}
于 2012-10-22T21:58:39.653 に答える