Implementing Google Maps Drawing

Question

Implementing Google Maps Drawing

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Opa,

I have two maps on my page, one of them will need to implement Drawing, but, it is not working, to call it I'm using it.

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);
    }
});

Normally loads, without drawing, in the documentation I checked the need to insert the code below, for the map to make Drawing options available.

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 in no way did it work, in the console comes the error:

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

Can anyone help me?

The code block looks 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 js call is

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

javascript google-maps

asked by anonymous 15.12.2015 / 04:03

2 answers

0

It is necessary to enable the drawing library of google maps by calling it by url with the libraries=drawing parameter:

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

so the options will appear

font

15.12.2015 / 13:22

How to modify this statement to get a url for pt_BR? Rota Dynamica ActionResult

score 0 · Accepted Answer

I changed the application, I took the 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 the coordinates in the input, working perfectly fine.