I have an editable circle on my map and I wanted to see if it's possible to have a marker always appear at the center of the circle. I know I can have a marker and move it to the center of the circle whenever it's moved. The problem is that circles do not have a "while being dragged" event so I should wait for the dragging to stop and then move the marker to the new center.
Bind the center of the circle to the position of a marker
See this "article" in the documentation
Proof of concept
Relevant changed code from that example:
var circle = new google.maps.Circle({
strokeWeight: 2,
draggable: true
});
Related
Please find the google mapsApi documentation https://developers.google.com/maps/documentation/javascript/shapes#editable
Please zoomout to world view and then expand the region selection towards right in single attempt. At some point you could observe that the selection became unstable and it selects entirely different section of the world.
By default the rectangle selection tool seems to look for shortest possible path to complete the shape. This creates a strange behavior when attempting to draw a very very large region.
I wanted to click and drag a very large region that covered a large geography. I was dragging West to East. Once the size of the object was very large, the selection reserved and was covering a completely different section of the world.
I attempt to expand a boundary to include the entire world. When the boundary goes far enough, again the region appears to be the minimal/smaller area.
Expected behavior was the selector to continue expanding in the direction the user intends. In this case I would expect the selector to continue its west to east expansion.
https://developers.google.com/maps/documentation/javascript/shapes#editable
var bounds = {north: 44.599, south: 44.490, east: -78.443, west: -78.649 }; // Define a rectangle and set its editable property to true. var rectangle = new google.maps.Rectangle({bounds: bounds, editable: true});
Please tries to expands rectangle to further right
Is there a solution to resolve the scenario mentioned?
Please let me know if further details required.
As I said in my comment, when you drag it "too far", the rectangle left and right coordinates (longitude) get inverted.
In other words, if you drag it too far to the right, right will become left and left will be where you dragged the right side to. And the opposite in the other direction. So by comparing where was the left with where is the right or vice-versa, you can detect if your rectangle left and right got inverted and invert it again... This way you can achieve what you want.
And of course if you drag the right side further to the right than where the left was (or the other way around), it will reset, as you can't have a rectangle overlapping itself around the globe.
The UI can be a bit confusing though, as you can see the rectangle lines get inverted but you can't do much about that.
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 2,
zoomControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Set origin bounds
var originBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-20, -100),
new google.maps.LatLng(20, 20)
);
// Get left/right coords
var left = originBounds.getSouthWest().lng();
var right = originBounds.getNorthEast().lng();
// Create editable rectangle
var rectangle = new google.maps.Rectangle({
bounds: originBounds,
fillColor: 'white',
fillOpacity: .5,
editable: true,
map: map
});
// Check for rectangle bounds changed
google.maps.event.addListener(rectangle, 'bounds_changed', function() {
// Get currents bounds and left/right coords
var newBounds = rectangle.getBounds();
var newLeft = newBounds.getSouthWest().lng();
var newRight = newBounds.getNorthEast().lng();
if ((newRight === left) || (newLeft === right)) {
// User dragged "too far" left or right and rectangle got inverted
// Invert left and right coordinates
rectangle.setBounds(invertBounds(newBounds));
}
// Reset current left and right
left = rectangle.getBounds().getSouthWest().lng();
right = rectangle.getBounds().getNorthEast().lng();
});
}
function invertBounds(bounds) {
// Invert the rectangle bounds
var invertedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()),
new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getSouthWest().lng())
);
return invertedBounds;
}
initialize();
#map-canvas {
height: 150px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
When I'm painting two polygons with a part of them covering each other, the mouse events are triggred for the polygon that was last painted no matter that it's zIndex is lower!
Is there a way to make mouse event to be triggered for the polygon with higher zIndex?
My code is adding layers of polygons in an asynchronous way (ajax) and some layers overlap.
I want polygons with higher zIndex's to get the mouse events.
A polygon is created by :
function createPolygon(_paths, _strokeColor, _strokeOpacity, _strokeWeight, _fillColor, _fillOpacity, _zindex) {
var polygon = new google.maps.Polygon({
paths: _paths,
strokeColor: _strokeColor,
strokeOpacity: _strokeOpacity,
strokeWeight: _strokeWeight,
fillColor: _fillColor,
fillOpacity: _fillOpacity,
zIndex: _zindex
});
return polygon;
}
and afterwards is attached to the map by:
for (i in polygonArray) {
polygonArray[i].setMap(map);
polygonArray[i].setVisible(true);
}
Thanks
I set the panControl property of the map to false which apperantly disables the affect of the zIndex, you must set it to true!
If i put map.setCenter(marker.getPosition()); in OnClick Marker then the Marker Moves to Center Position of the Map Window.Which mean the Function get Marker Position and set it as center of the Map so the Marker Became Center Position of the Window.
Now i want this.
map.SetCenter(top, center); So that the marker will be in Top Center of the Map Window. Why i need this because When i click Marker the InfoBox opens downside of the maker and Half of the Info Box hide.
Please Give a Solution to solve this issue.
I am using this Info Box http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
You might have disabled autopan for infobox..
remove disableAutoPan : true from your infobox properties...
infoBoxCluster = new InfoBox({
content : yourContent,
disableAutoPan : true, // remove this line
zIndex : 10000,
closeBoxURL : '',
pixelOffset : new google.maps.Size(42, -28)
});
Pardon my noobishness, but, although I've seen this issue discussed, I haven't found an answer. I am trying to draw concentric circles on a Google Map using the API v3, making each clickable as on a bullseye target, but always the largest one ends up on top, which means it is the only clickable one.
The following uses an array called "subjects" that consists of increasing radii and various fillcolors.
for (i=0;i<subjects.length;i++) {
radi = subjects[i][0];
fillcolr = subjects[i][1];
zindx = subjects.length - i;
newcircle = new google.maps.Circle({
radius: radi,
center: centerPoint,
strokeWidth: 1,
fillOpacity: 1.0,
fillColor: fillcolr,
zIndex: zindx
});
// display it
newcircle.setMap(map);
// make outer circle clickable
google.maps.event.addListener(newcircle, 'click', function() {
circleClickedInfo(i);
});
The circles are there, the zIndex is set, but the biggest circle is always on top. I have tried setting zIndex on a pass afterwards, boosting each zIndex by 10000, reversing the order in which I create the circles, not setting the zIndex explicitly, etc. I'm sure I am missing something obvious (see the aforementioned noobishness), but I can't figure out what it is. TIA for any pointers...
Try this for every shape you need:
selectedShape.setOptions({zIndex:0});
I have a Google map running on the v3 API, I added some custom markers, is it possible to make them scale depending on the zoom level of the map?
I tried searching the reference but can't seem to find any methods to resize a MarkerImage.
Maybe I have to remove markers everything the map changes zoom and create new markers in a different size?
This code will resize every time the map is zoomed so it always covers the same geographic area.
//create a marker image with the path to your graphic and the size of your graphic
var markerImage = new google.maps.MarkerImage(
'myIcon.png',
new google.maps.Size(8,8), //size
null, //origin
null, //anchor
new google.maps.Size(8,8) //scale
);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(38, -98),
map: map,
icon: markerImage //set the markers icon to the MarkerImage
});
//when the map zoom changes, resize the icon based on the zoom level so the marker covers the same geographic area
google.maps.event.addListener(map, 'zoom_changed', function() {
var pixelSizeAtZoom0 = 8; //the size of the icon at zoom level 0
var maxPixelSize = 350; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels
var zoom = map.getZoom();
var relativePixelSize = Math.round(pixelSizeAtZoom0*Math.pow(2,zoom)); // use 2 to the power of current zoom to calculate relative pixel size. Base of exponent is 2 because relative size should double every time you zoom in
if(relativePixelSize > maxPixelSize) //restrict the maximum size of the icon
relativePixelSize = maxPixelSize;
//change the size of the icon
marker.setIcon(
new google.maps.MarkerImage(
marker.getIcon().url, //marker's same icon graphic
null,//size
null,//origin
null, //anchor
new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale
)
);
});
Unfortunately, you would have to setIcon every single time. However, you can pre-define them, and then just apply them to the marker.
zoomIcons = [null, icon1, icon2]; // No such thing as zoom level 0. A global variable or define within object.
marker.setIcon(zoomIcons[map.getZoom()]);
To add to the map an image that follows the zoom level, use a GroundOverlay.
https://developers.google.com/maps/documentation/javascript/groundoverlays