I am trying to draw many circles over a Google Map (many circles per rooftop).
I tried the Circle class and seem to be okay for big circles, but when drawing small ones they are not round at all.
The code I'm using goes like this:
for(var i = 0; i < latitudes.length; i++)
var newCircle = new google.maps.Circle({
strokeColor: "#FFFFFF",
strokeOpacity: 0,
strokeWeight: 1,
fillColor: "#FFFFFF",
fillOpacity: 1,
map: map,
center: new google.maps.LatLng(latitudes[i], longitudes[i]),
radius: 0.5
});
newCircle.setMap(map);
And the result is:
I know that there are other ways to draw points over a google map, but I'd really like to go with the google solution if there is a way to make them look round as they should be.
You could use Symbols, they should be perfect circles. Try this:
var whiteCircle = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1.0,
fillColor: "white",
strokeOpacity: 1.0,
strokeColor: "white",
strokeWeight: 1.0,
scale: 1.0
};
Then
for(var i = 0; i < latitudes.length; i++) {
var latLng = new google.maps.LatLng(latitudes[i], longitudes[i])
var newCircle = new google.maps.Marker({
icon: whiteCircle,
position: latLng
});
newCircle.setMap(map);
}
The circles are likely to be huge, so play around with the scale to get it right.
I have never used the Circle class. Symbols were introduced in this year's Google I/O. They are vectors, meaning you can pretty much define your own shape. Here's a link for more info:
googlegeodevelopers.blogspot.com/2012/06/powerful-data-visualization-with.html
Anti-aliasing is critical.
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON)
The Google solution will not work for smaller circles.
Related
This question already has an answer here:
How to stylize a circle?
(1 answer)
Closed 5 years ago.
I am new to google maps api I don't know how to create dotted circle on google maps. I have created circle on google maps using the following code
circle = new google.maps.Circle({
strokeColor: Settings.CircleRadius.strokeColor,
strokeOpacity: Settings.CircleRadius.strokeOpacity,
strokeWeight: Settings.CircleRadius.strokeWeight,
fillColor: #0000FF,
fillOpacity: Settings.CircleRadius.fillOpacity,
center: click_latlon,
map: map,
//clickable: true,
radius: radius_m //Radius in meters
});
Can someone help me how to draw dotted circle on google maps.
Here is the code for the dotted polyline, You can have a try for something similar for a circle
// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});
This question already has answers here:
Draw ring (not circle) in Google Maps API
(4 answers)
Closed 7 years ago.
How to draw a doughnut with Google Maps JavaScript API?
For highlighting the outside of inner circle and the inside of outer circle.
My idea is to put the inner circle before the outer.
The problem is it cannot be loaded when setting the fillOpacity of the inner circle.
var citymap = {};
citymap['innerCircle'] = {
center: amsterdam,
radius: 3146.2245383489244,
//opacity = 0.0 // bug here
};
citymap['outerCircle'] = {
center: amsterdam,
radius: 7021.113634532091,
opacity: 0.35};
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: citymap[city].opacity,
map: map,
center: citymap[city].center,
radius: citymap[city].radius
};
Typically in google maps you can draw polygon with hole the first polygon is the outer shape e the other are the inner shape
see this stackoverflow for examples ring example
I have the following lat/long array, which i can draw it on map with success. My question is how can i have a loop and place a circle with custom Km radius (or standard radius if it's too much pain in the 4ss) for each array coordinates.
var locations = [
['lala', 37.0093833333333,24.7528638888889, 1],
['lala', 35.0093833333333,20.7528638888889, 2]
];
Thank you
var cityCircle
for (elements in your array) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: your latlng,
radius: your radius here
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
something like this?
I was searching from last 1-2 hours about this question but didn't get any answer if this question is posted before then please give me link and delete this one anyways,
I've a marker in my google map and its like mobile tower
I want to create 10 KM triangle of 120 degree on that marker click,
here's the my code :
google.maps.event.addListener(marker2,"click",function(e){
var myLatLng = e.latLng;
var Tlat = myLatLng.lat();
var Tlng = myLatLng.lng();
var Tlng2 = Tlng+(10*0.009);
var Tlng3 = Tlng-(10*0.009);
var Tlat2 = Tlat+30;
var Tlat3 = Tlat-30;
var triangleCoords = [
new google.maps.LatLng(Tlat2, Tlng2),
new google.maps.LatLng(Tlat, Tlng),
new google.maps.LatLng(Tlat3, Tlng3)
];
alert(triangleCoords);
Triangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
Triangle.setMap(map);
My current lat-long is 23.061389, 76.37222199999997 I don't know 10*0.009 is correct formula to find out km or adding 30 degree is correct or not
Follow the link
http://www.birdtheme.org/useful/v3tool.html
this will help you to draw any type of shape polygon, rectangle with source code on Google Map V3.
I'm trying to draw a google maps that has multiple Circle overlays, however I do not want to reveal the correct center of the radius.
So for example, myLatlng is my lat/lon center of the radius, I want to draw a circle not around it, but a circle that will include that point.
This is how I currently draw my circle:
var myLatlng = new google.maps.LatLng(33.33333,22.22222);
var circle = new google.maps.Circle({
map: map,
radius: 3218,
strokeColor: "#FFAA00",
fillColor: "#00AAFF",
fillOpacity: 0.3,
center: myLatlng,
zIndex: 99999,
});
33.33333,22.22222 is a 'secret' location that I do not want to reveal, however I would like to have that point within the circle.
Is that possible?
Thanks!
In your example code. The circle could move anywhere such that 33.3 and 22.2 could still be included.
One way to do this would be to simply add a random offset.
// Generate random between -5 and 5 (just an example)
var latOffset = Math.floor(Math.random()*11) - 5;
var longOffset = Math.floor(Math.random()*11) - 5;
var myLatlng = new google.maps.LatLng(33.33333 + latOffset,22.22222 + longOffset);
The tricky bit you've got is to ensure that the random offset doesn't move the circle out of bounds. The section Expressing latitude and longitude as linear units on Wikipedia should help.