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
});
Related
Trying to plot a rectangle area with bounds lat/lng, also plotting a marker at the center of the area, when i use the default icon of google maps which is tapering at the end, it sticks to the rectangle on zoom in /zoom out. but when using a custom icon then it does not stick to the rectangle area. please check the fiddles:
Default marker:
https://jsfiddle.net/8mQ6G/473/
var myPos = new google.maps.LatLng(47.56715, -122.1556);
var marker = new google.maps.Marker({
position: myPos,
//icon: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
map: map
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ffffff',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(47.5204, -122.2047),
new google.maps.LatLng(47.6139, -122.1065))
});
Custom marker:
https://jsfiddle.net/8mQ6G/472/
var myPos = new google.maps.LatLng(47.56715, -122.1556);
var marker = new google.maps.Marker({
position: myPos,
icon: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
map: map
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ffffff',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(47.5204, -122.2047),
new google.maps.LatLng(47.6139, -122.1065))
});
What makes the custom icon plot elsewhere depends on the base of the icon if its to the left or right, since if its not in the center like the default one it will always be away form the exact lat/lng. Please suggest is there any solution to this issue.
Please see the discussion of complex custom markers in the documentation.
Complex icons
You may want to specify complex shapes to indicate regions that are clickable, and specify how the icons should appear relative to other overlays (their "stack order"). Icons specified in this manner should set their icon properties to an object of type Icon.
Icon objects define an image. They also define the size of the icon, the origin of the icon (if the image you want is part of a larger image in a sprite, for example), and the anchor where the icon's hotspot should be located (which is based on the origin).
You can set the anchor to whatever position on the icon you would like placed at the location (usually the tip of a "bubble" icon, but for the "i" I would think you would want the bottom of the "i" which is ~4 pixels from the bottom of the image in the center:
var marker = new google.maps.Marker({
position: myPos,
icon: {
url: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
anchor: new google.maps.Point(16, 28)
},
map: map
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(47.53772, -122.1153),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myPos = new google.maps.LatLng(47.56715, -122.1556);
var marker = new google.maps.Marker({
position: myPos,
icon: {
url: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
// referenced to the upper left hand corner of the image, in pixels
// the image is 32 x 32, this is in the center 4 pixels from the bottom
anchor: new google.maps.Point(16, 28)
},
map: map
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ffffff',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(47.5204, -122.2047),
new google.maps.LatLng(47.6139, -122.1065))
});
}
initialize();
html,
body,
#map {
height: 100%;
width: 100%;
border: 6px solid #dedede;
margin: 0 auto;
}
<title>Google Maps JavaScript API v3 Example: Rectangle Simple</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Hey there i´m trying to find a way to just increase the length of a line without changing the orientation
i tried this with Polyline
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.4419, lng: -122.1419},
zoom: 8
});
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
geodesic: true,
map: map
});
}
and it works as expected
but i rather want it like
or
i only have the two coordinates from first example
it should be geodesic and theoreticaly idealy arround the globe back at same start so it will be like endless
i also tried to find out a way to calculate the some more far coordinates but searching is a mess because everboidy want to be found for caluclating distances.
so having two coordinates following the "line-through orientation" of but have high distance like some thousand kilometers pls let me know
You can use the Google Maps Javascript API Geometry library to compute the heading of the line and extend it an arbitrarily long distance along that heading.
code snippet::
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 37.4419,
lng: -122.1419
},
zoom: 8
});
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.4519, -122.1519)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
geodesic: true,
map: map
});
// extend line from each end along its existing heading
// pick 20e6 meters as an arbitrary length
var lineHeading = google.maps.geometry.spherical.computeHeading(line.getPath().getAt(0), line.getPath().getAt(1));
var newPt0 = google.maps.geometry.spherical.computeOffset(line.getPath().getAt(0), 20000000, lineHeading);
line.getPath().insertAt(0, newPt0);
var newPt1 = google.maps.geometry.spherical.computeOffset(line.getPath().getAt(1), 20000000, lineHeading + 180);
line.getPath().push(newPt1);
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map"></div>
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 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.