What event is triggered if a google maps drawn circle is moved? - google-maps-api-3

When you draw a circle in google maps api it has a point right in the center of it and when you move the circle by that point(if not by that point i get bounds changed and then center changed events) what kind of event is triggered ?
I have tried "center_changed", "dragend", "bounds_changed", nothing is triggered if circle is moved by that point.
drawingManager.setDrawingMode($scope.G.drawing.OverlayType.CIRCLE);
drawingManager.set('circle',{
strokeWeight: 3,
strokeOpacity: 1.0,
fillOpacity: 0.3,
fillColor: "red",
draggable: true,
geodesic: true,
editable: true,
suppressUndo: true
});
here's the code i set up drawing manager, and after that i just draw a circle on the map.
Pic:

The DrawingManager won't let you change the center until the circlecomplete event fires. Add a 'center_changed' event listener to the circle when the 'circlecomplete event fires, use that to capture the changes of the center position.
google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
google.maps.event.addListener(circle, 'center_changed', function (e) {
document.getElementById('info').innerHTML = circle.getCenter().toUrlValue(6);
});
});
working fiddle
code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
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.CIRCLE
]
},
markerOptions: {
icon: 'images/beachflag.png'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
google.maps.event.addListener(circle, 'center_changed', function(e) {
document.getElementById('info').innerHTML = circle.getCenter().toUrlValue(6);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="info"></div>
<div id="map-canvas"></div>

Related

Google Maps setIcon to update path (not URL)

I can't seem to find any documentation about updating the path of an icon (marker) in the Google Maps API. In this particular example I'm trying to change the fillOpacity of the icon from 0 to 1.
var myIcon = {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: "#ff00ff",
fillOpacity: 0,
strokeColor: "#ff00ff",
strokeWeight: 2
};
var marker = new google.maps.Marker({
position: position,
icon: myIcon,
map: map,
title: 'My Marker>'
});
marker.addListener('click', function() {
this.setOptions({icon:{fillOpacity: 0.5}}); // Not working
this.setIcon({fillOpacity: 0.2}); // Not working either
});
The "icon" is an anonymous object. You need to set the whole object again:
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setIcon(myIcon);
});
or:
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setOptions({
icon: myIcon
});
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -25.363882,
lng: 131.044922
}
});
var myIcon = {
path: google.maps.SymbolPath.CIRCLE,
scale: 5,
fillColor: "#ff00ff",
fillOpacity: 0,
strokeColor: "#ff00ff",
strokeWeight: 2
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: myIcon,
map: map,
title: 'My Marker>'
});
marker.addListener('click', function() {
myIcon.fillOpacity = 0.5;
this.setIcon(myIcon);
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- 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>

Unable to get bounds of drawing rectangle on map

I am working on this demo. Why am I getting this error:
overlay.getBounds is not a function
while trying to get bounds of drawn rectangle on the map?
var rectangle;
var map;
var drawingManager;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 44.5452,
lng: -78.5389
},
zoom: 9
});
drawingManager = new google.maps.drawing.DrawingManager();
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
rectangle = overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
console.log( start);
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function drawRec() {
//Setting options for the Drawing Tool. In our case, enabling Polygon shape.
if (!!rectangle && !!rectangle.overlay && !!rectangle.overlay.setMap) {
rectangle.overlay.setMap(null);
}
drawingManager.setOptions({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: {
strokeColor: '#6c6c6c',
strokeWeight: 3.5,
fillColor: '#926239',
fillOpacity: 0.6,
editable: true,
draggable: true
}
});
drawingManager.setMap(map);
}
html,
body,
#map {
height: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<button onclick="drawRec();">Draw Rectangle</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
You get the error: "overlay.getBounds is not a function", because overlay.getBounds() is not a function. overlay is not a google.maps.Rectangle, but it has an overlay property which is.
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
rectangle = overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = overlay.overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
console.log(start.toUrlValue(6));
});
updated fiddle
code snippet:
var rectangle;
var map;
var drawingManager;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 44.5452,
lng: -78.5389
},
zoom: 9
});
drawingManager = new google.maps.drawing.DrawingManager();
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlay) {
rectangle = overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = overlay.overlay.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
console.log(bounds.toUrlValue(6));
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function drawRec() {
//Setting options for the Drawing Tool. In our case, enabling Polygon shape.
if (!!rectangle && !!rectangle.overlay && !!rectangle.overlay.setMap) {
rectangle.overlay.setMap(null);
}
drawingManager.setOptions({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.RECTANGLE]
},
rectangleOptions: {
strokeColor: '#6c6c6c',
strokeWeight: 3.5,
fillColor: '#926239',
fillOpacity: 0.6,
editable: true,
draggable: true
}
});
drawingManager.setMap(map);
}
html,
body,
#map {
height: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<button onclick="drawRec();">Draw Rectangle</button>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
Check the documentation:
https://developers.google.com/maps/documentation/javascript/drawinglayer#drawing_events
The overlay event in your event listener has two properties:
overlay
type
So you'd need to change your code to something like this:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(overlayEvent) {
rectangle = overlayEvent.overlay;
drawingManager.setOptions({
drawingMode: null,
drawingControl: false
});
var bounds = rectangle.getBounds();
var start = bounds.getNorthEast();
var end = bounds.getSouthWest();
});

Google Maps API, Generate Line Path instead of a Circle Path

The generated path is composed of series of circles. I want it to be a line. Thanks!
var directionsDisplay = new google.maps.DirectionsRenderer({
map:map, polylineOptions:{strokeColor: '#98c28a',
strokeOpacity: 0,
strokeWeight: 4,
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: '#98c28a',
fillOpacity: 1,
scale: 2,
strokeColor: '#98c28a',
strokeOpacity: 1,
},
offset: '0',
repeat: '10px'
}]}, suppressMarkers:true });
Remove the icons from your Polyline definitions, and make the strokeOpacity non-zero
var directionsDisplay = new google.maps.DirectionsRenderer({
map:map,
polylineOptions:{
strokeColor: '#98c28a',
strokeOpacity: 1.0,
strokeWeight: 4
},
suppressMarkers:true
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
polylineOptions: {
strokeColor: '#98c28a',
strokeOpacity: 1.0,
strokeWeight: 4,
},
suppressMarkers: true
});
var directionsService = new google.maps.DirectionsService();
directionsService.route({
origin: "New York, NY",
destination: "Boston, MA",
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

The Drawing Tools won't show on my map

<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="TestMap.aspx.cs" Inherits="TestMap" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing" type="text/javascript"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8sE5-1UPLAT2UqkNqRiMnvVNh9UNZk-0&callback=initMap">
</script>
<script type="text/javascript">
function initMap() {
var centerPoint = new google.maps.LatLng(41, -103);
var mapOptions = {
center: centerPoint,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
keyboardShortcuts: true,
mapTypeControl: true,
streetViewControl: true,
drawingControl: true,
zoom: 8
};
// alert('initMap');
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
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
]
},
markerOptions: {icon: 'images/pUmjb.jpg'},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
</script>
MAP:
<div style="width:800px; height:500px" id="map"></div>
</asp:Content>
I am trying to use v3 of the google maps api, and it's all working fine so far, except that I can't seem to get the toolbar for the drawing tools to show on the map. Here is the code for a very simplified WebForm. I'm guessing that I'm just missing one parameter or one line of code somewhere, but I just can't seem to make it work.
Only include the API one time. If you want/need to use a key (it is recommended but not required), include it in the parameters of the single include. The sensor parameter is no longer required.
(update: keys are now required)
<script src="http://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyB8sE5-1UPLAT2UqkNqRiMnvVNh9UNZk-0&callback=initMap" type="text/javascript" async defer></script>
code snippet:
function initMap() {
var centerPoint = new google.maps.LatLng(41, -103);
var mapOptions = {
center: centerPoint,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
keyboardShortcuts: true,
mapTypeControl: true,
streetViewControl: true,
drawingControl: true,
zoom: 8
};
// alert('initMap');
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
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
]
},
markerOptions: {
icon: 'images/pUmjb.jpg'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>
<div id="map"></div>

How to get the radius after editing circle... google maps apĂ­

i'm trying get the radius after editing circle, i am using the drawingManager library for draw the circle into map. the next part is a part of the code.
<script type="text/javascript">
function initialize() {
var mapOptions = {
//center: new google.maps.LatLng(-34.397, 150.644),
center: new google.maps.LatLng(4.705, -74.113),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
redondo = new google.maps.Circle(document.getElementById('map_canvas'),mapOptions);
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
]
},
markerOptions: {
icon: 'Images/marker_sprite.png'
},
circleOptions: {
strokeColor: '#FF0000',
fillColor: '#DF0101',
fillOpacity: 0.3,
strokeWeight: 2,
editable:true
},
rectangleOptions: {
strokeColor: "#FF0000",
strokeWeight: 2,
fillColor: '#DF0101',
fillOpacity: 0.35,
},
polygonOptions: {
strokeColor: "#FF0000",
strokeWeight: 2,
fillColor: '#DF0101',
fillOpacity: 0.35,
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
radius = circle.getRadius();
document.getElementById("radio").innerHTML=radius;
redondo=circle;
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(Polygon) {
var vertices = Polygon.getPath();
var pocision="";
for (var i=0; i < vertices.length; i++){
var xy=vertices.getAt(i);
pocision += "<br>"+ xy.lng() +" , " + xy.lat();
document.getElementById("posicion").innerHTML=pocision;
}
//document.getElementById("posicion").innerHTML= Polygon.getPaths(latlang).tostring;
});
var redondo= new google.maps.circle();
google.maps.event.addListener(redondo, 'radius_changed', function(){
--///////// in this part of the code don't enter
alert('buenaS');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width: 500px; height: 400px; display:table-cell"></div>
<div style="margin:0px 0px 0px 800px; display:table-cell">
Posicion: <span id="posicion" style="display:none"></span><br>
Radio = <span id="radio"></span>
</div>
i was searching the event handler to change radius and call 'radius_changed' but to me don't work
Observe the radius_changed event of the circle:
google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
radius = circle.getRadius();
document.getElementById("radio").innerHTML=radius;
redondo=circle;
//observe radius_changed
google.maps.event.addListener(redondo,'radius_changed',function(){
alert(this.getRadius())
})
});

Resources