私はマップ(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>