draw-polygon-clear-markers-and-polygon

draw-polygon-clear-markers-and-polygon

by santosh_patnala

HTML

<div id="map-canvas" style="height: 500px; width: 100%; float: left"></div>
            <div class="textAlign" style="margin-top: 20px; margin-bottom: 20px;">
                <a class="btn btn-info" href="#" id="create" onclick="createPolygon();">Create Polygon</a>
                <a class="btn btn-info" href="#" id="remove" onclick="removePolygon();">Remove Polygon</a>
                <a class="btn btn-info" href="#" id="divSaveGeoFence">Save GeoFence</a>
                <a class="btn btn-info" href="#" id="clear" onclick="clearOverlays();">Clear Markers</a>
            </div>

JavaScript

var map;
        var coords = [];
        var markers = [];
        var rightShoulderFront;
        var lats = [];
        var lngs = [];

        window.onload = loadScript;

        function loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDhHvIupm5fBz9iZFOxA_ghTZLiCmzsrjc&sensor=true&callback=initialize";
            document.body.appendChild(script);
            $('#liReports').css('display', '');
        }

        function initialize() {
            var mapOptions = {
                zoom: 6,
                center: new google.maps.LatLng(17.397821, 78.479354),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            radioSelected();
        }

        function radioSelected() {
            //to remove polygon from google.maps
            if (rightShoulderFront !== undefined)
                rightShoulderFront.setMap(null);

            removeEventListener();

            $('#divSaveGeoFence').css('display', 'none');

            coords = [];
            addEventListener_poly();
            clearOverlays();
        }

        function setCoords(e) {
            $('#divBtnDisplay').css('display', '');
            //$('#divFenceCenter').text(e.latLng.ob + ', ' + e.latLng.pb);
            circle_center = e.latLng;
        }

        function clearCoords() {
            coords = [];
        }

        function addEventListener_poly() {

            google.maps.event.addListener(map, 'click', function (e) {
                coords.push(e.latLng);
                lats.push(e.latLng.lb);
                lngs.push(e.latLng.mb);
                placeMarker(e.latLng, map);
            });

        }

        function removeEventListener() {
            //google.maps.event.addListener(map, 'click', function (e)...