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?
Related
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'm looking for the way for converting polyline (created from i.e. 2 coordinates) to polygon containing at least 4 coordinates. Simple usage case is airway on the aviation map, it has start at point A, end at point B and width of x nautical miles. Dummy code is:
var someLine = new google.maps.Polyline({
path: [
{lat: 51.15, lng: 15},
{lat: 51.15, lng: 18}
],
geodesic: true,
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 5
});
someLine.setMap(map);
// how to convert above someLine into?:
var airway = new google.maps.Polygon({
paths: [
{lat: 51, lng: 15},
{lat: 51, lng: 18},
{lat: 51.3, lng: 18},
{lat: 51.3, lng: 15}
],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
geodesic: true
});
airway.setMap(map);
Which looks like:
where black line is common polyline and red polygon is desired effect.
Is that any API/plugin available for such task or I need to calculate the corners of polygon(s) manually?
One option would be to use the Google Maps Javascript API v3 geometry library to compute your polygon based on the width of the air lane and the center line. If you specify the width of the air lane using meters (rather than nautical miles, which is just a conversion):
var lineWidth = 10000; // (meters)
var lineHeading = google.maps.geometry.spherical.computeHeading(someLine.getPath().getAt(0), someLine.getPath().getAt(1));
var p0a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading+90);
var p0b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading-90);
var p1a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading+90);
var p1b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading-90);
var airway = new google.maps.Polygon({
paths: [p0a, p0b, p1b, p1a],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
geodesic: true
});
code snippet:
var geocoder;
var map;
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 someLine = new google.maps.Polyline({
path: [{
lat: 51.15,
lng: 15
}, {
lat: 49.15,
lng: 18
}],
geodesic: true,
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 5
});
someLine.setMap(map);
var lineWidth = 10000; // (meters)
var lineHeading = google.maps.geometry.spherical.computeHeading(someLine.getPath().getAt(0), someLine.getPath().getAt(1));
var p0a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading + 90);
var p0b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(0), lineWidth, lineHeading - 90);
var p1a = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading + 90);
var p1b = google.maps.geometry.spherical.computeOffset(someLine.getPath().getAt(1), lineWidth, lineHeading - 90);
// how to convert above someLine into?:
var airway = new google.maps.Polygon({
paths: [p0a, p0b, p1b, p1a],
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
geodesic: true
});
airway.setMap(map);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < airway.getPath().getLength(); i++) {
bounds.extend(airway.getPath().getAt(i));
}
map.fitBounds(bounds);
}
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?libraries=geometry"></script>
<div id="map_canvas"></div>
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.
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