Disegnare su Google Maps con Javascript

Mattepuffo's logo
Disegnare su Google Maps con Javascript

Disegnare su Google Maps con Javascript

Programmazione, Javascript - AJAX

Spulciandomi la documentazione ufficiale, ho visto che è possibile disegnare su Google Maps includendo nelle nostre pagina una libreria apposita: drawing!

Viene inclusa direttamente con Google Maps, passandolo come parametro:

<script
src="https://maps.googleapis.com/maps/api/js?libraries=drawing">
</script>

Più sotto vi ho messo un esempio di pagina tutto incluso:

  • richiamare la libreria
  • attivare il disegno di:
    • circle
    • rectangle
    • polygon
    • polyline
    • marker
  • settare alcune opzioni generali
  • settare opzioni specifiche per un tipo di disegno (il rettangolo in questo caso)
  • intercettare tre eventi:
    • fine disegno circle
    • fine disegno rectangle
    • fine disegno in generale

Però ci sono alcune cose da tenere a mente:

  • anche se gli esempi sono presi dalla documentazione ufficiale, i disegni di polygon e polyline non mi funzionano (ma non mi funzionano neanche sull'esempio uffciale)
  • non ho ben capito come dovrebbe funzionare l'editable che ho messo sul rectangle; nel senso che sembra sia possibile modificarlo, ma nella pratica non ci riesco (fate una prova per capire che intendo)

Ecco qua:

<!DOCTYPE html>
<html>
    <head>
        <title>GMAPS DRAWING</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
    </head>
    <body>
        <div id="map" style="height: 700px;"></div>
        <script>
            function initMap() {
                var map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: 41.8962546, lng: 12.5348237},
                    zoom: 8
                });

                var drawingManager = new google.maps.drawing.DrawingManager({
                    drawingMode: google.maps.drawing.OverlayType.MARKER,
                    drawingControl: true,
                    drawingControlOptions: {
                        position: google.maps.ControlPosition.TOP_CENTER,
                        drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
                    },
                    rectangleOptions: {
                        fillColor: '#ffffff',
                        fillOpacity: 1,
                        strokeWeight: 5,
                        clickable: false,
                        editable: true,
                        zIndex: 1
                    }
                });
                drawingManager.setMap(map);

                google.maps.event.addListener(drawingManager, 'circlecomplete',
                        function (circle) {
                            console.log(circle.getRadius());
                        });

                google.maps.event.addListener(drawingManager, 'rectanglecomplete',
                        function (rectangle) {
                            console.log(rectangle.getBounds());
                        });

                google.maps.event.addListener(drawingManager, 'overlaycomplete',
                        function (event) {
                            console.log(event.type);
                            console.log(event.overlay);
                        });
            }
        </script>
        <script
            src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" 
            async defer>
        </script>
    </body>
</html>

Enjoy!

Condividi

Commentami!