Plotting Points with the Google Maps API - api

Question

I have a project where the client is looking to be able to create an outline around a specific area on a Google Map and have it clickable with the standard Google Maps info window.
So rather than just a standard point being plotted at a specific lat and long location it would need to create multiple points and a stroke/outline.
Does anyone know if this is even possible with the Google Maps api?
Thanks.

Answer 1

Sample code:
toggleCommentMode(true);
function toggleCommentMode(isCommentMode){
if(isCommentMode){
//$("#map img").css("cursor", "crosshair !important");
commentModeEventListener = google.maps.event.addListener(FRbase, 'click', commentListener);
}
else{
//$("#map img").css("cursor", "auto !important");
google.maps.event.removeListener(commentModeEventListener);
}
}
//}}}
function commentListener(evt){
var newMarker = new google.maps.Marker({
position: evt.latLng,
draggable : true,
title : "Drag me; Double click to remove",
map : map
});
google.maps.event.addListener(newMarker, 'dragend',function(){
updateMarkerList();
});
google.maps.event.addListener(newMarker, 'dblclick',function(){
$(myMarkers["userComment"]).each(function(i,marker){
if(marker === newMarker){
marker.setMap(null);
Array.remove(myMarkers["userComment"], i);
updateMarkerList();
}
});
});
if(typeof myMarkers["userComment"] == "undefined"){
myMarkers["userComment"] = [];
}
myMarkers["userComment"].push(newMarker);
updateMarkerList();
}
//update marker list
//{{{
function updateMarkerList(){
$("#commentMarkerList").empty();
var path = [];
if(myMarkers["userComment"].length == 0){
$("#commentAccord .step").hide();
}
else{
$("#commentAccord .step").show();
}
$(myMarkers["userComment"]).each(function(i, marker){
path.push(marker.getPosition());
var listItem = $("<li></li>").addClass("ui-state-default").attr("id", i);
$(listItem).mouseenter(function(){
marker.setShadow("img/highlightmarker.png");
});
$(listItem).mouseleave(function(){
marker.setShadow("");
});
var titleLink = $("<a></a>").attr({
innerHTML : "Point",
href : "javascript:void(0);"
});
var removeLink = $("<a></a>").attr({
innerHTML : "(remove this)",
href : "javascript:void(0);"
});
$(removeLink).click(function(){
marker.setMap(null);
Array.remove(myMarkers["userComment"], i);
updateMarkerList();
});
$(listItem).append(
$("<span></span>").addClass("ui-icon ui-icon-arrowthick-2-n-s")
);
$(listItem).append(titleLink).append(removeLink);
$("#commentMarkerList").append(listItem);
});
if(typeof userCommentPolyline != "undefined"){
userCommentPolyline.setMap(null);
}
var polylineopts = {
path : path,
strokeColor : "#FF0000",
strokeWeight : 5,
strokeOpacity : 1
};
userCommentPolyline = new google.maps.Polyline(polylineopts);
userCommentPolyline.setMap(map);
$("#commentMarkerList").sortable({
placeholder: 'ui-state-highlight',
stop : function(evt, ui){
var newList = [];
$("#commentMarkerList li").each(function(i,listitem){
newList.push(myMarkers["userComment"][parseInt($(listitem).attr("id"))]);
});
myMarkers["userComment"] = newList;
updateMarkerList();
}
});
$("#commentMarkerList").disableSelection();
}
//}}}
//clear User comments
//{{{
function clearUserComments(type){
if(typeof myMarkers[type] !== "undefined"){
$(myMarkers[type]).each(function(i,marker){
marker.setMap(null);
});
myMarkers[type]=[];
if(type == "userComment"){
updateMarkerList();
}
}
}
//}}}
//create comments
//{{{
function createComments(){
$.getJSON('data.aspx',
{"p":"commentdata","d":new Date().getTime()},
function(data){
//console.log(data);
$(data).each(function(i,comment){
//console.log(commentTypes[comment.cat_id-1]);
if(typeof commentTypes[comment.cat_id-1] !== "undefined") {
if(typeof commentTypes[comment.cat_id-1].comments == "undefined"){
commentTypes[comment.cat_id-1]["comments"] = [];
}
//create path and anchor from comment.positions
//{{{
var path = [];
var anchor;
$(comment.positions).each(function(i, position){
var pos = new google.maps.LatLng(
position.lat,
position.lng
);
if(position.anchor){
anchor = pos;
}
path.push(pos);
});
//}}}
var isLine = (path.length > 1);
//marker and poly line creation
//{{{
var iconToShow = (isLine)?
commentTypes[comment.cat_id-1].markerLineImage
: commentTypes[comment.cat_id-1].markerImage;
var marker = new google.maps.Marker({
//map : map,
title : commentTypes[comment.cat_id-1].title,
position : anchor,
icon : iconToShow
});
var polyline = new google.maps.Polyline({
path : path,
strokeColor : "#106999",
strokeWeight : 5,
map : null,
strokeOpacity : 1
});
//}}}
//link bar in infowindow creation
//{{{
var zoomLink = $("<a></a>").attr({
href : "javascript:zoomTo("+anchor.lat()+","+anchor.lng()+",16);javascript:void(0);",
innerHTML : "Zoom here"
}).addClass("infowinlink");
var likeLink = $("<a></a>").attr({
href : "javascript:markerVote("+comment.id+",true);void(0);",
innerHTML : "Like"
}).addClass("infowinlink likelink");
var dislikeLink = $("<a></a>").attr({
href : "javascript:markerVote("+comment.id+",false);void(0);",
innerHTML : "Dislike"
}).addClass("infowinlink dislikelink");
var linkBar = $("<div></div>").addClass('linkbar').append(zoomLink).append(" | ")
.append(likeLink).append(" | ")
.append(dislikeLink);
if(isLine){
var showLineLink = $("<a></a>").attr({
href : "javascript:myMarkers["+comment.id+"].line.setMap(map);$('.toggleLineLink').toggle();void(0);",
innerHTML : "Show line",
id : "infowin-showline"
}).addClass("infowinlink toggleLineLink");
var hideLineLink = $("<a></a>").attr({
href : "javascript:myMarkers["+comment.id+"].line.setMap(null);$('.toggleLineLink').toggle();void(0);",
innerHTML : "Hide line",
id : "infowin-hideline"
}).addClass("infowinlink toggleLineLink");
$(linkBar).append(" | ").append(showLineLink).append(hideLineLink);
}
//}}}
//var content = "<div class='infowin'><h4>"+commentTypes[comment.cat_id-1].title +"</h4><p>"+comment.text+"</p>";
var content = "<div class='infowin'><h4>"+comment.name +"</h4><p>"+comment.text+"</p>";
content += $(linkBar).attr("innerHTML")+"</div>";
//marker click function
//{{{
google.maps.event.addListener(marker, 'click', function(){
infoWin.setContent(content);
infoWin.open(map, marker);
currMarkerDom(comment.id);
});
//}}}
var obj = {"marker": marker, "line":polyline};
commentTypes[comment.cat_id-1].comments.push(obj);
myMarkers[comment.id]=obj;
////myMarkers.all = $.map(myMarkers, function (n,i) { return n; });
//myMarkers.all.push(marker);
markerArray.push(marker);
}});
var isLoad = false;
google.maps.event.addListener(map,'tilesloaded', function () {
if (!isLoad) {
isLoad = true;
mc = new MarkerClusterer(map, markerArray, {maxZoom:16});
}
});
}
);
}
//}}}