3

ユーザーがテキストフィールドにアドレスを入力してエントリをジオコードできるGoogleマップフォームを作成しました。これは地図上にマーカーを置く。これはうまくいきますが、追加のaddListenerを追加したいので、ユーザーが地図をクリックすると、クリックする場所に別のピンが追加されます。何らかの理由で私の 'click' addListenerが動作していません。そのような複数のリスナーを追加するにはどうすればよいですか?ジオコーディングを使用して複数のaddListenerイベントをGoogle Mapフォームに追加

私は自分の海流のコードを添付:

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(40.7,-74.0), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById('map_canvas'), 
     mapOptions); 

    var input = document.getElementById('searchTextField'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 

    autocomplete.bindTo('bounds', map); 

    var marker = new google.maps.Marker({ 
     map: map, 
     draggable: true 
    }); 

    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     var place = autocomplete.getPlace(); 
     if (place.geometry.viewport) { 
     map.fitBounds(place.geometry.viewport); 
     } else { 
     map.setCenter(place.geometry.location); 
     map.setZoom(16); 
     } 

     var image = "http://www.google.com/mapfiles/marker_green.png"; 
     marker.setIcon(image); 
     marker.setPosition(place.geometry.location); 



     var address = ''; 
     if (place.address_components) { 
     address = [(place.address_components[0] && 
        place.address_components[0].short_name || ''), 
        (place.address_components[1] && 
        place.address_components[1].short_name || ''), 
        (place.address_components[2] && 
        place.address_components[2].short_name || '') 
        ].join(' '); 
     } 
    }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

google.maps.event.addListener(map, 'click', function() { 
    //alert("Hello! I am an alert box!!"); 

    var marker1 = new google.maps.Marker({ 
     map: map, 
     draggable: true 
    }); 
    var image = "http://www.google.com/mapfiles/marker_green.png"; 
     marker1.setIcon(image); 
     marker1.setPosition(new google.maps.LatLng(40.7,-74.0)); 
    map.addOverlay(marker1); 
}); 

はあなたがマップオブジェクトへのonclickイベントを追加する

google.maps.event.addListener(map,'click', function()... 

を使用することができ、あなたに

答えて

1

マップのクリックイベントがマウスクリックの位置を返します。

更新:新しいマーカーが追加されたときに古いマーカーを消去するには、マーカーのインスタンスをリスナースコープの外に保存する必要があります。リスナーイベントの開始時にマーカーを消去できます。 fiddle example.

+0

私は新しいマーカーを追加するときに最後のマーカーを削除する方法は?(私は 'marker1.setMap(null)を追加するだけでした) 'しかし、これは私に新しいマーカーを追加させません) – AtomicCharles

+0

答えを更新しました –

+0

ブライアンありがとう!完璧に動作します – AtomicCharles

1

ありがとうございます。ここに参照です: http://code.google.com/apis/maps/documentation/javascript/reference.html#Map

[ツールライブラリを描画Googleマップを使用することができます。 http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools

+0

おかげ真野更新

var singleMarker; google.maps.event.addListener(map, 'click', function(event) { //if marker exists, erase marker if(singleMarker){ singleMarker.setMap(null); } singleMarker = new google.maps.Marker({ position: event.latLng, //mouse click position map: map, draggable: true, icon: "http://www.google.com/mapfiles/marker_green.png" }); }); 

。私はちょうど 'google.maps.event.addListener(map1、 'click'、function(){...}をgoogle.maps.event.addListener(map、 'click'、function(){...}に変更しました。私の初期化()関数をどのようにロードしているのかというと、それはどうでしょうか? – AtomicCharles

+0

AtomicCharles - これを修正しましたか?同じ問題が発生している気がしますか? – kayakpim

関連する問題