JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
click and move the corsor to draw!
<div id="map"></div>
<div style="padding:20px">
</div>
CSS
#map {
width:100%;
height: 700px;
}
JavaScript
var latlng = new google.maps.LatLng(46.779231, 6.659431);
var options = {
center: latlng,
zoom:20,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable:false
};
var map = new google.maps.Map(document.getElementById("map"), options);
var markers = [];
var isDrawing = false;
var overlay = new google.maps.OverlayView();
overlay.draw = function () {};
overlay.setMap(map);
var polyLine;
var parcelleHeig = Array();
google.maps.event.addListener(map, 'mousedown', function () {
isDrawing=true;
polyLine = new google.maps.Polyline({
map: map
});
$("#map").mousemove(function (e) {
if(isDrawing == true)
{
var pageX = e.pageX;
var pageY = e.pageY;
var point = new google.maps.Point(parseInt(pageX), parseInt(pageY));
var latLng = overlay.getProjection().fromDivPixelToLatLng(point);
polyLine.getPath().push(latLng);
latLng = String(latLng);
latLng=latLng.replace("(","");
latLng=latLng.replace(")","");
var array_lng = latLng.split(',');
parcelleHeig.push(new google.maps.LatLng(array_lng[0],array_lng[1])) ;
}
});
});
google.maps.event.addListener(map, 'mouseup', function () {
isDrawing=false;
//console.log(parcelleHeig);
var polygoneParcelleHeig = new google.maps.Polygon({
paths: parcelleHeig,//sommets du polygone
...