i have two codes that place markers on google maps using JSON...
Marker code is this..
function grid_latlong() {
var
markers = JSON.parse('<%=ConvertDataTabletoString2() %>');
var
mapOptions = {
zoom: 7,
center: new google.maps.LatLng(28.5472, 77.2508),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
style:
google.maps.MapTypeControlStyle.DROPDOWN_MENU,
poistion:
google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds:
[google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE]
},
navigationControl: true,
navigationControlOptions:
{
style:
google.maps.NavigationControlStyle.ZOOM_PAN
},
scaleControl: true,
disableDoubleClickZoom: true,
draggable: true,
streetViewControl: true,
draggableCursor: 'move'
};
var
infoWindow = new google.maps.InfoWindow();
//var
image = 'images/grid.png';
var
map = new
google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
for (i =
0; i < markers.length; i++) {
var
data = markers[i];
var
myLatlng = new google.maps.LatLng(data.lat,
data.long);
//
var image = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var
image = 'http://maps.google.com/mapfiles/kml/pal3/icon62.png';
var
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.grid,
icon: image
});
(function
(marker, data) {
//
Attaching a click event to the current marker
google.maps.event.addListener(marker, "click",
function (e) {
infoWindow.setContent(data.grid);
infoWindow.open(map,
marker);
});
})(marker, data);
}
}
I want to add POLYGONS Using the same JSON Method...But i m bit stuck...Posting my code...plz help//
function
initialize2() {
var
markers = JSON.parse('<%=ConvertDataTabletoString2() %>');
var
mapOptions = {
zoom: 15,
center: new
google.maps.LatLng(28.526283,77.166679),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var
bermudaTriangle;
var map
= new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
for (i =
0; i < markers.length; i++) {
var data = markers[i];
// Define
the LatLng coordinates for the polygon's path.
var
triangleCoords = [
new
google.maps.LatLng(data.x1,data.y1),
new google.maps.LatLng(data.x2,data.y2),
new google.maps.LatLng(data.x3,data.y3),
new google.maps.LatLng(data.x4,data.y4),
new google.maps.LatLng(data.x5,data.y5),
new google.maps.LatLng(data.x6,data.y6),
new google.maps.LatLng(data.x7,data.y7),
// new google.maps.LatLng(data.x8,data.y8),
// new google.maps.LatLng(data.x9,data.y9),
// new
google.maps.LatLng(data.x10,data.y10),
//new
google.maps.LatLng(data.x11,data.y11),
// new
google.maps.LatLng(data.x12,data.y12)
];
//
Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.10,
});
bermudaTriangle.setMap(map);
}