Cacher is the code snippet organizer for pro developers

// This example creates a simple polygon representing the Bermuda Triangle.
var infoWindow = null;
var icon;
var map;
var markers = [];
var positions = [];
var mypolygon = null;
var labelIndex = 0;
function initMap() {
    icon = {
        url: " http://www.clker.com/cliparts/9/8/a/8/13159446021177651125Arriving%20Flights.svg.med.png", // url
        scaledSize: new google.maps.Size(40, 50), // scaled size
        origin: new google.maps.Point(0, 0), // origin
        anchor: new google.maps.Point(0, 0) // anchor
    };
    var centrolat = {
        lat: 17.993140450575645,
        lng: -92.92621500734646
    };
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: {
            lat: 17.993140450575645,
            lng: -92.92621500734646
        },
        mapTypeId: 'terrain'
    });

    infoWindow = new google.maps.InfoWindow();
    map.addListener('click', function(e) {
        addMarker(e.latLng);
    });

    var marker = new google.maps.Marker({
        position: centrolat,
        draggable: true,
        map: map,
        icon: icon,
        title: "Ejemplo marcador arrastrable"
    });

    google.maps.event.addListener(marker, 'click', function() {
        var resultColor =
            google.maps.geometry.poly.containsLocation(marker.getPosition(), mypolygon) ?
            'Dentro del area' :
            'Fuera del area';
        openInfoWindow(marker, resultColor);
    });

}

function openInfoWindow(marker, resultColor) {
    var markerLatLng = marker.getPosition();
    infoWindow.setContent([
        '<b>',
        resultColor,
        '</b><br>',
        'La posicion del marcador es:',
        markerLatLng.lat(),
        ', ',
        markerLatLng.lng(),
        '<br> Astrame y haz click para actualizar la posicion'
    ].join(''));
    infoWindow.open(map, marker);
}

function addMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true,
        label: ""+labelIndex++
    });
    markers.push(marker);
}

function deleteMarkers(clearText=true) {
    setMapOnAll(null);
    mypolygon.setMap(null);
    markers = [];
    positions = [];
    labelIndex=0;
    if(clearText)
    document.getElementById('textarea').value = "";
    
}
function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map);
    }
}

function createPolygon() {
    positions = [];
    if (mypolygon != null) {
        mypolygon.setMap(null);
    }


    for (var i = 0; i < markers.length; i++) {
        var posicionmarker = {
            lat: markers[i].getPosition().lat(),
            lng: markers[i].getPosition().lng()
        };

        positions.push(posicionmarker);
    }

    mypolygon = new google.maps.Polygon({
        paths: positions,
        strokeColor: '#48ff00',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#48ff00',
        fillOpacity: 0.35
    });
    mypolygon.setMap(map);
    document.getElementById('textarea').value = JSON.stringify(positions);

}
function createPolygonTexto(){
	deleteMarkers(false);
	var arrayText=JSON.parse(document.getElementById('textarea').value);
   for (var i = 0; i < arrayText.length; i++) { 
   	addMarker(arrayText[i]);
   }
 	createPolygon();
 }

<div id="floating-panel">
    <input onclick="createPolygon();" type=button value="Crear Poligono">
    <input onclick="createPolygonTexto();" type=button value="Generar desde json">
    <input onclick="deleteMarkers();" type=button value="Borrar Markers">
    
</div>

<div id="map"></div>
<textarea id="textarea" rows="30" cols="50">

</textarea>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
    height: 100%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto', 'sans-serif';
    line-height: 30px;
    padding-left: 10px;
}

textarea {
    width: 100%;
}