2012-01-02 8 views
0

私はマップ(GoogleマップAPIのV3)にスポットと呼ばれる配列で50のマーカーを持っています。テキストフィールドを追加して、ユーザーが自分の郵便番号を入力できるようにして、周囲のマーカーに関連してそれらの位置を与える追加マーカーを追加します。私は私が以下にあるものとかなり近いと思うが、それは勝った;地図上にマーカーを出力する。私は既にマーカーの配列を持っているので、それは私が機能を介して追加のマーカーを追加するのが好きではないので、競合があると思う。どのように私はcodeAddress()関数を介して配列に追加の要素を追加する関数を取得できますか?それともそれを行う正しい方法さえありますか?GoogleマップV3のマーカーの既存の配列にジオコーディングされたマーカーを追加する

<script type="text/javascript"> 
var geocoder; 
var map; 
function initialize() { 

    geocoder = new google.maps.Geocoder(); 
    var myOptions = { 
    zoom: 14, 
    center: new google.maps.LatLng(51.51251523, -0.133201961), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    setMarkers(map, spots); 
} 


var spots = [ 

['River Street - Clerkenwell', 51.52916347, -0.109970527, '3.png', 2896, 'River Street - Clerkenwell'], 
['Phillimore Gardens - Kensington', 51.49960695, -0.197574246, '3.png', 2897, 'Phillimore Gardens - Kensington'] 

]; 

function setMarkers(map, locations) { 

     var image1 = new google.maps.MarkerImage('amber-spot.png', 
     new google.maps.Size(30, 36), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 

    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 

    for (var i = 0; i < locations.length; i++) { 
    var spot = locations[i]; 
    var myLatLng = new google.maps.LatLng(spot[1], spot[2]); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: spot[3], 
     title: spot[0], 
     zIndex: spot[4], 
     html: spot[5] 
    }); 
    var infowindow = new google.maps.InfoWindow({ 
}); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(this.html); 
    infowindow.open(map,this); 
}); 
    } 
} 

    function codeAddress() { 
    var address = document.getElementById("address").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker2 = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 
</script> 

これは

<div class="view-content"> 
<input id="address" type="textbox" value="W1T 4JD"> 
<input type="button" value="Geocode" onclick="codeAddress()"> 
<div id="map_canvas" style="width:800px; height:600px;"></div> 

答えて

0

をジオコーディングするためのフォームです私はこれを行うにはDrupalのGMAPモジュールに近接郵便番号フィルタを使用して終了。最初は私はdidnt;私はgmapモジュールを使用していなかったため、私はフィルタが使用されていたビューでネイティブマップを使用していないが、私は結果がまだ返された配列にあることに気づいていなかったので、

リー

関連する問題