配列内の場所のいくつかのマーカーを表示する次のコードがあり、クリックすると各マーカーが情報ウィンドウを表示しますが、21の場所のうち8つのマーカーしか表示できないことを除いてすべて正常に機能します。
// declare Variables
var geocoder;
var map;
var tex;
var markersArray = [];
// pids array 21 addreses
var pids = [{ad:'251 Pantigo Road Hampton Bays NY 11946',pid:'9'},
{ad:'Amagensett Quiogue NY 11978',pid:'10'},
{ad:'789 Main Street Hampton Bays NY 11946',pid:'12'},
{ad:'30 Abrahams Path Hampton Bays NY 11946',pid:'14'},
{ad:'3 Winnebogue Ln Westhampton NY 11977',pid:'15'},
{ad:'44 White Oak Lane Montauk NY 11954',pid:'16'},
{ad:'107 stoney hill road Bridgehampton NY 11932',pid:'17'},
{ad:'250 Pantigo Rd Hampton Bays NY 11946',pid:'19'},
{ad:'250 Pantigo Rd Hampton Bays NY 11946',pid:'20'},
{ad:'44 Woodruff Lane Wainscott NY 11975',pid:'21'},
{ad:'Address East Hampton NY 11937',pid:'46'},
{ad:'Address Amagansett NY 11930',pid:'49'},
{ad:'Address Remsenburg NY 11960 ',pid:'50'},
{ad:'Address Westhampton NY 11977',pid:'51'},
{ad:'prop address Westhampton Dunes NY 11978',pid:'52'},
{ad:'prop address East Hampton NY 11937',pid:'53'},
{ad:'Address East Hampton NY 11937',pid:'58'},
{ad:'Address Southampton NY 11968',pid:'59'},
{ad:'Address Bridgehampton NY 11932',pid:'60'},
{ad:'Address Sagaponack NY 11962',pid:'61'}];
// create an MVCobject for creating Info window on marker
var pin = new google.maps.MVCObject();
// The content placeholder for the Info window.
var content = document.createElement("DIV");
var title = document.createElement("DIV");
content.appendChild(title);
// that is where you have the ajax result placed
var streetview = document.createElement("DIV");
streetview.style.width = "326px";
streetview.style.height = "212px";
content.appendChild(streetview);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Initialize
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.8687097, -73.0014946);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
getAllPids();
}
// loop to create all markers
function getAllPids() {
var i;
for (i = 0; i < pids.length; i++) {
var test = pids[i];
codeAddress(test);
}
}
// get latlng for each address , create marker and add eventlistner to click open infowindow
function codeAddress(place) {
geocoder.geocode({ 'address': place.ad }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: place.pid
});
markersArray.push(marker);
google.maps.event.addListener(marker, "click", function() {
openInfoWindow(marker);
});
} else {
// alert("Geocode was not successful for the following reason: " + status);
}
});
}
// click event on marker calls this to show infowindow.
function openInfoWindow(marker) {
getContent(marker.getTitle());
pin.set("position", marker.getPosition());
infowindow.open(map, marker);
}
// Now ajax call to get the content for the current info window
function getContent(pid) {
$.ajax({
type: "POST",
url: "mapSearchResult.aspx/get_map",
data: "{'pids':'"+pid +"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
title.innerHTML =msg.d;
}
});
}