Implement Drawing Google Maps

Asked

Viewed 409 times

1

Opa,

I have two maps on my page, in one of them will be necessary to implement Drawing, but, it is not working, to call it I am using.

if ($("#geocomplete_rota").length) {
    $("#geocomplete_rota").geocomplete({
        map: "#submit-map-rota",
        details: "form ",
        location: new google.maps.LatLng(40.6700, -73.9400),
        mapOptions: {
            zoom: 14,
            scrollwheel: true,
            mapTypeId: "roadmap",
            disableDefaultUI: false,
            mapTypeControl: true,
            mapTypeControlOptions: {
                position: google.maps.ControlPosition.LEFT_TOP
            },
            zoomControl: true,
            zoomControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            scaleControl: true,
            streetViewControl: true,
            streetViewControlOptions: {
                position: google.maps.ControlPosition.RIGHT_TOP
            },
            styles: mapStyle
        },


        markerOptions: {
            draggable: true,
            icon: 'images/pin-empty.png'
        }


    });

    $("#geocomplete_rota").bind("geocode:dragged", function(event, latLng) {
        $("input[name=lat_rota]").val(latLng.lat());
        $("input[name=lng_rota]").val(latLng.lng());
    });
}

//redraw map
$("a[href='#tab-map']").click(function() {
    if (estateMap) {
        setTimeout(function() {
            google.maps.event.trigger(estateMap, 'resize');
        }, 500);
    }
});
$("a[href='#tab-street-view']").click(function() {
    if (panorama) {
        setTimeout(function() {
            panorama.setVisible(true);
        }, 500);
    }
});

Loads normally, without Drawing, on documentation I checked the need of inserting the code below, for the map to make available the options of Drawing.

var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
  position: google.maps.ControlPosition.TOP_CENTER,
  drawingModes: [
    google.maps.drawing.OverlayType.MARKER,
    google.maps.drawing.OverlayType.CIRCLE,
    google.maps.drawing.OverlayType.POLYGON,
    google.maps.drawing.OverlayType.POLYLINE,
    google.maps.drawing.OverlayType.RECTANGLE
  ]
},
circleOptions: {
  fillColor: '#ffff00',
  fillOpacity: 1,
  strokeWeight: 5,
  clickable: false,
  editable: true,
  zIndex: 1
}
drawingManager.setMap(map),

But, no way I could put to work, on the console I get the error: 

Uncaught SyntaxError: Unexpected identifier 
(na linha: var drawingManager = new google.maps.drawing.DrawingManager({)

Someone can help me?

The code pad is like this:

if ($("#geocomplete_fixo").length) {
$("#geocomplete_fixo").geocomplete({
map: "#submit-property-map-fixo",
details: "form ",
location: new google.maps.LatLng(40.6700, -73.9400),
mapOptions: {
    zoom: 14,
    scrollwheel: true,
    mapTypeId: "roadmap",
    disableDefaultUI: false,
    mapTypeControl: true,
    mapTypeControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
    },
    styles: mapStyle
},


markerOptions: {
    draggable: true,
    icon: 'images/pin-empty.png'
},

var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.MARKER,
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.POLYLINE,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
    drawingManager.setMap(map)
 })

});

$("#geocomplete_fixo").bind("geocode:dragged", function(event, latLng) {
$("input[name=lat_fixo]").val(latLng.lat());
$("input[name=lng_fixo]").val(latLng.lng());
});
}

//redraw map
$("a[href='#tab-map']").click(function() {
if (estateMap) {
 setTimeout(function() {
    google.maps.event.trigger(estateMap, 'resize');
  }, 500);
}
});

$("a[href='#tab-street-view']").click(function() {
if (panorama) {
setTimeout(function() {
    panorama.setVisible(true);
}, 500);
}
});

The call of js is

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=minha-key&amp;libraries=places,drawing"></script>

javascript google-maps

  • Sorry for the answer, distract me, should be a comment

  • google.maps.drawing.DrawingManager({...}); Faltou fechar seu código... drawing com: );` He doesn’t seem to be complete... I believe it’s a syntax error.

  • I checked the code, in fact it was missing close, but, the error still occurs

2 answers

0

it is necessary to enable the Google maps Drawing library by calling it by the url with the parameter libraries=drawing:

https://maps.googleapis.com/maps/api/js?libraries=drawing

so the options will appear

source

  • Includes the library as mentioned, in fact it was missing, but, still was not the error persists

  • Exactly the same error occurs? because it was already supposed to work, try using https since you use a key, and do not recommend leaving the same exposed in the question

0


I changed the application, I took out Drawing and I’m using Polygon:

        function initMap() {
          // Map Center
          var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
          var mapOptions = {
            zoom: 12,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.RoadMap
          };
          var map = new google.maps.Map(document.getElementById('id-do-mapa'),mapOptions);

          var triangleCoords = [
            new google.maps.LatLng(33.5362475, -111.9267386),
            new google.maps.LatLng(33.5104882, -111.9627875),
            new google.maps.LatLng(33.5004686, -111.9027061)
          ];

          myPolygon = new google.maps.Polygon({
            paths: triangleCoords,
            draggable: true,
            editable: true,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35
          });

          myPolygon.setMap(map);


        google.maps.event.addListener(myPolygon.getPath(), "insert_at", getPolygonCoords);
        google.maps.event.addListener(myPolygon.getPath(), "set_at", getPolygonCoords);


        function getPolygonCoords() {
          var len = myPolygon.getPath().getLength();
          var htmlStr = "";
          for (var i = 0; i < len; i++) {
            htmlStr += myPolygon.getPath().getAt(i).toUrlValue(5) + "/";
          }
          document.getElementById('id-input-receber-coordenadas').innerHTML = htmlStr;
        }

    }

Retrieving coordinates in input, working perfectly well.

Browser other questions tagged javascript google-maps

You are not signed in. Login or sign up in order to post.