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())
})
});
Related
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>
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();
});
I have a map in div with absolute position inside of a container that is absolute too. Also map's size is calculated from top, bottom, left and right css properties.
Clicking on polyline calls fitBounds on map, and instead of fitting it zooms out to 0.
Example is here: fiddle (to reproduse this situation enter the fullscreen mode, click on first polyline, outzoom and click on second)
Any suggestions why it's happening?
<body onload="initialize()">
<div id="map_container" style="position: absolute; width: 100%; height: 100%;">
<div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px">
</div>
</div>
</body>
and js code
var mapOptions = {
zoom: 7,
center: {lat: 52, lng: 12.5}
}
var firstPolylineCoordinates = [
{lat: 52, lng: 12},
{lat: 52, lng: 13}
];
var secondPolylineCoordinates = [
{lat: 51, lng: 12},
{lat: 51, lng: 13}
];
function initialize(){
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
var firstPolyline = new google.maps.Polyline({
path: firstPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
firstPolyline.setMap(map);
firstPolyline.addListener("click", function(polyMouseEvent){
bounds.extend(firstPolylineCoordinates[0]);
bounds.extend(firstPolylineCoordinates[1]);
map.fitBounds(bounds);
});
var secondPolyline = new google.maps.Polyline({
path: secondPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
secondPolyline.setMap(map);
secondPolyline.addListener("click", function(polyMouseEvent){
bounds.extend(secondPolylineCoordinates[0]);
bounds.extend(secondPolylineCoordinates[1]);
map.fitBounds(bounds);
});
}
You are using the same bounds for the two polyline "zoom" operations. When you click on the second polyline, you end up zooming to the bounds for both polylines (which is not what you want).
Declare the bounds variable inside the polyline click listener functions:
firstPolyline.addListener("click", function(polyMouseEvent){
var bounds = new google.maps.LatLngBounds();
bounds.extend(firstPolylineCoordinates[0]);
bounds.extend(firstPolylineCoordinates[1]);
map.fitBounds(bounds);
});
proof of concept fiddle
code snippet:
var mapOptions = {
zoom: 7,
center: {lat: 52, lng: 12.5}
}
var firstPolylineCoordinates = [
{lat: 52, lng: 12},
{lat: 52, lng: 13}
];
var secondPolylineCoordinates = [
{lat: 51, lng: 12},
{lat: 51, lng: 13}
];
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var firstPolyline = new google.maps.Polyline({
path: firstPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
firstPolyline.setMap(map);
firstPolyline.addListener("click", function(polyMouseEvent) {
var bounds = new google.maps.LatLngBounds();
bounds.extend(firstPolylineCoordinates[0]);
bounds.extend(firstPolylineCoordinates[1]);
map.fitBounds(bounds);
});
var secondPolyline = new google.maps.Polyline({
path: secondPolylineCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 5
});
secondPolyline.setMap(map);
secondPolyline.addListener("click", function(polyMouseEvent) {
var bounds = new google.maps.LatLngBounds();
bounds.extend(secondPolylineCoordinates[0]);
bounds.extend(secondPolylineCoordinates[1]);
map.fitBounds(bounds);
});
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<body onload="initialize()">
<div id="map_container" style="position: absolute; width: 100%; height: 100%;">
<div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px">
</div>
</div>
</body>
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>
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>