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.
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?
I have the following symbol code:
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
strokeOpacity: 0,
fillColor: 'red',
fillOpacity: 1,
scale: 20
};
Which is added to a polyline like so:
m[i] = new google.maps.Polyline({
path: f0,
icons: [{
icon: lineSymbol,
offset: '50%'
}],
geodesic: true,
strokeColor: 'red',
strokeOpacity: 0.6,
strokeWeight: 5
});
This results in the following, a red circle in the centre of each polyline:
My question is, is it possible to have some text within the circle? If so, how?
I don't think this is possible yet. An alternative would be to add a marker with a clickable info window on the same spot where the symbol is.
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
});
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
});
I am using Google maps api V3.
I have a polygonpoints array as like in this Link's variable 'triangleCoords'.
I am generating maps dynamically using a button click..
I want to place the same polygon to be included in all maps.
As i am trying, the Polygon only displayed on the latest Map that is generated.
I want the Polygons to be like as in the Image Link
You can only add a google.maps.Polygon to one map. If you have multiple maps, you need to make one for each.
function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var mapOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var map2 = new google.maps.Map(document.getElementById('map-canvas2'),
mapOptions);
var map3 = new google.maps.Map(document.getElementById('map-canvas3'),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];
// Construct the polygon
var bermudaTriangle1 = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
var bermudaTriangle2 = new google.maps.Polygon({
map: map2,
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
var bermudaTriangle3 = new google.maps.Polygon({
map: map3,
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle1.setMap(map);
}
example