Tracer des points avec l'API Google Maps

Question

J'ai un projet dans lequel le client cherche à créer un contour autour d'une zone spécifique sur une carte Google Map et à cliquer sur la fenêtre d'informations standard de Google Maps.

Donc, plutôt que d'être simplement un point standard tracé à un emplacement lat et long spécifique, il faudrait créer plusieurs points et un contour/contour.

Est-ce que quelqu'un sait si c'est possible avec l'API Google Maps?

Merci.

Answer 1

Exemple de 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}); 
     } 
    }); 

    } 
); 
} 
//}}}