Google マップ作成スクリプトにプッシュされる、以下に定義されている latlng 値の JavaScript オブジェクトがあります。
var lat1 = '51.0001';
var lng1 = '52.0001';
var lat2 = '61.0001';
var lng2 = '62.0001';
google_map_item.coordinates = [
new polygonLatLng(lat1,lng1),
new polygonLatLng(lat2,lng2)
];
google_map_items.push(google_map_item);
function polygonLatLng(lat,lng){
this.lat = lat;
this.lng = lng;
}
ご覧のとおり、google_map_item.coordinates オブジェクトは基本的にほんの数点であり、これが完全な多角形ではないことは理解していますが、動的なものを使用する前にスクリプトを動作させるためにいくつかの単純な値をハードコーディングしました。
オブジェクト google_map_items は、以下のようにマップ作成スクリプトにプッシュされます:
jQuery(document).ready(function($) {
var longitude = google_map_items[0].lat;
var latitude = google_map_items[0].lon;
var center = new google.maps.LatLng(longitude, latitude);
var zoomlevel = parseInt(google_map_items[0].zoomlevel);
var myOptions = {
zoom: zoomlevel,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var bounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for(i = 0; i < google_map_items.length; i++) {
var latlng = new google.maps.LatLng(google_map_items[i].lat, google_map_items[i].lon);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=" + (i + 1) + "|FF8888|000000",
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
$(".surgery").removeClass("highlighted");
$("#surgery-" + (i + 1)).addClass("highlighted");
}
})(marker, i));
}
if (google_map_items.length >1 ) { map.fitBounds(bounds); }
//check if area to add to map
//if(google_map_items.coordinates){
var surgeryArea;
var areaCoords = [
];
surgeryArea = new google.maps.Polygon({
paths: google_map_item.coordinates,
strokeColor: "#FF0000",
strokeOpacity: 0.4,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
clickable: true
});
// add an event listener
google.maps.event.addListener(surgeryArea, 'click', function() {
this.setMap(null);
});
surgeryArea.setMap(map);
//}
});
google_map_item.coordinates オブジェクト内の各ポイントに対して、新しい google.maps.LatLng コンストラクターを使用して構築する必要がある areaCoords 用の空の obecjt があります。JavaScript オブジェクトと配列操作に関する私の知識は、これを渡すための構文を理解するのに十分ではありません。