Google Maps Poly Example

by jamesdh

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<body>
    <h3>Poly Coords</h3>
    <ul id="bounds">
        
    </ul>
    <div id="map-canvas"/>
</body>

CSS

#map-canvas {
    /* margin-top: -10px; */
    width: 500px;
    height: 500px;
}

JavaScript

var map

$(document).ready(function() {
    var mapOptions = {
        center: {lat: 44.970697, lng: -93.2618534},
        zoom: 12
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    var triangleCoords = [
        new google.maps.LatLng(44.9833, -93.2005),
        new google.maps.LatLng(44.94, -93.2505),
        new google.maps.LatLng(45.005, -93.308)
    ];
    
    // Construct the polygon.
    poly = new google.maps.Polygon({
        paths: triangleCoords,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        editable: true,
        draggable: true
    });
    
    poly.setMap(map);
    
    var coords = function() {
        $("#bounds").empty();
        poly.getPath().forEach(function(latlng, index) {
           $("#bounds").append("<li>" + latlng.toString() + "</li>");   
        });
    }
    
    google.maps.event.addListener(poly.getPath(), 'set_at', coords);
    
    google.maps.event.addListener(poly.getPath(), 'insert_at', coords);
    
    coords();
})