I have a mousemove event in my map and now I want to draw a circle with just the stroke line.
var circle = new google.maps.Circle({
strokeColor: '#0000FF',
strokeWeight: 2,
fillOpacity: 0,
map: map,
center: new google.maps.LatLng(lat, lon),
radius: 100
});
The problem is that the transparent fill center of that circle is still "capturing" the mouse event so it doesn't go to my Map mousemove listener.
Is there any way to really set the circle fill center to transparent as in: transparent color AND transparent dealing with mouse events?
In alternative, a way to easily propagate the event to the Map?
Add clickable: false to the CircleOptions passed to the constructor:
var circle = new google.maps.Circle({
strokeColor: '#0000FF',
strokeWeight: 2,
fillOpacity: 0,
clickable: false,
map: map,
center: new google.maps.LatLng(lat, lon),
radius: 100
});
Related
I'm using react.js and I currently know how to put a hole in a polygon via the following:
drawShape(google){
var entireMap = [
new google.maps.LatLng(-85.1054596961173, -180),
new google.maps.LatLng(85.1054596961173, -180),
new google.maps.LatLng(85.1054596961173, 180),
new google.maps.LatLng(-85.1054596961173, 180),
new google.maps.LatLng(-85.1054596961173, 0)];
var innerCoords = [
{lat: 28.745, lng: -70.579},
{lat: 29.570, lng: -67.514},
{lat: 27.339, lng: -66.668}
];
const poly = new google.maps.Polygon({
paths: [entireMap, innerCoords],
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#000000',
fillOpacity: 0.35
});
poly.setMap(google.map);
}
Right now, I have a list of properties that contain lng and lat. Instead of having polygon as holes I want to have circles as holes, using the lng and lat.
So far, I see that the documentation allows you to create circles separately:
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
However, I would like the circles to be "holes" within the entireMap polygon. Is it possible to combine the entireMap shape and circle shape or would I need to create a function that creates circles from the polygon shape?
Google Maps circle looks like hand drawn.
Circle script is:
var circle = new google.maps.Circle({
center: myLatLng,
radius:1000,
strokeColor: "#000000",
strokeOpacity:1,
fillOpacity:0.4,
strokeWeight: 2,
fillColor: "#000000",
map:map
});
Can we make the circle more fine tuned.
My requirement is to show circle around marker with fine tuned circle border.
You could try using a symbol. I don't believe there's an option to change those circles from using the "hand-drawn" style. It's odd because their rectangles don't seem to be using that look.
Here is an example :
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-predefined
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var myCircle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: 0.8,
scale: 20,
strokeColor: 'black',
strokeWeight: 3
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: myCircle,
map: map
});
}
Here is an example of a circle around a marker :
function initialize() {
var myLatlng = new google.maps.LatLng(16.5083,80.64);var mapOptions = {zoom: 12,center: myLatlng};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var marker = new google.maps.Marker({map: map,position: myLatlng});
var circle = new google.maps.Circle({
map: map,
radius: 2000,
fillColor: '#000000',
fillOpacity: 0.4,
strokeColor: '#000000',
strokeWeight: 2
});
circle.bindTo('center', marker, 'position');
}
google.maps.event.addDomListener(window, 'load', initialize);
Sorry for the stupid question but i don't understand why the code doesn't work...
var centro= new google.maps.LatLng(0,0);
var circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: centro,
radius: 1000
});
// Add the circle for this city to the map.
Can you help me?
Thanks!
See if this helps you...
var circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: new google.maps.LatLng(surveyors[i][5], surveyors[i][6]),
radius: ddlRadius_value * 1609.345 // convert miles to kilometers
};
// Add the circle to the map.
var circle = new google.maps.Circle(circleOptions);
// Bind the center of the circle to the marker
circle.bindTo('center', marker, 'position');
You've centered your circle at (0,0), i.e. on the equator a bit west of Africa. Is that spot visible at all, in your map at its current position and zoom?
Also, the radius parameter is in meters. If you're zoomed out enough, your 1000-meter-radius circle will simply be too small to see.
The anchor: of my icon is ignored although I think the "moves" are absolute and not relative. No matter what values I supply for anchor: in my code, the SVG markers are unchanged. To be more specific, the pins are being positioned downward and to the right of where they should be. Is it because I am using bezier curves, or what?
function createMarker(point,text,ID,color,label,pinage) {
var stroke = "000000"
var icon = {
path: "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z",
fillColor: color,
fillOpacity: .8,
anchor: google.maps.Point(0.0, 0.0),
strokeWeight: 1,
scale:1.4
};
var marker = new google.maps.Marker({ position: point, map: map , title: text, icon: icon, zIndex: ID});
}
You've ommitted the new-keyword, it has to be:
anchor: new google.maps.Point(0.0, 0.0),
I have a standard google maps set up with a click event that fires various code - works fine.
But when I add this rectangle to the map:
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillOpacity: 0.0,
map: map,
bounds: bounds
});
It draws the rectangle perfectly but clicks on map points beneath the rectangle are not being detected, only clicks outside the perimeter of the rectangle.
Is there a quick/easy way around this?
From the documentation
clickable: false
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 1,
fillOpacity: 0.0,
map: map,
bounds: bounds,
clickable: false
});