I'm currently adding an arrow like this:
var arrowSymbol = {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
scale: 4
};
var line_options = {
path: path,
geodesic: true,
clickable: false,
strokeColor: color,
strokeOpacity: .7,
strokeWeight: stroke,
icons: [{
icon:arrowSymbol,
offset:'100%'
}]
}
The problem is that the stroke weight on my line is rather large. The tip of the arrow is right at the end of the line, and the line bulges out past the arrow's tip and looks weird. What I need is for the base of the arrow to be at the end of the line.
Change the anchor of the icon.
https://developers.google.com/maps/documentation/javascript/reference#Symbol
anchor | Point | The position of the symbol relative to the marker or polyline. The coordinates of the symbol's path are translated left and up by the anchor's x and y coordinates respectively. By default, a symbol is anchored at (0, 0). The position is expressed in the same coordinate system as the symbol's path.
Related
Can anyone advise as to how I should implement a system where the map markers' sizes increase according to their order?
The markers are arranged in order and I would like the latest marker to be the biggest and the others to decrease in size the lower in order they are.
A solution could be to use SVG markers. You can scale them as you wish. Here is a quick example with a simple circle marker:
var icon = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: .6,
anchor: new google.maps.Point(0,0),
strokeWeight: 0,
scale: 1
}
Note the scale property. You can increment this value every time you create a marker.
JSFiddle demo
Hope this helps!
increment the size of icon marker
that may help
I'm trying draw polygon arrow using Google Map APT V3. See code below. The problem is when I zoom out the map arrow head remain same. Any way to adjust the zoom level of arrow head?
var myCoordinates = [
new google.maps.LatLng(54.065836, -7.415771),
new google.maps.LatLng(53.219191, -7.261963)
];
var polyOptions = {
path: myCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
, icons: [{ icon: { path: google.maps.SymbolPath.FORWARD_OPEN_ARROW, scale: 2 }, offset: "100%"}]
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);
You could have an event listener for the zoom_changed event on the map, which adjusts the scale property on the icon Symbol object.
When drawing large circle onto a Google map, when the circles get really large (thousands of miles translated to meters) the circles start to sine wave over the map.
Example
Here's the code to set up and draw the circles:
//larger, outer circle
var options = {
strokeWeight: 0,
fillColor: '#AA0000',
fillOpacity: 0.5,
map: map,
radius: distance
};
//smaller inner circle
var options2 = {
strokeWeight: 0,
fillColor: '#AA0000',
fillOpacity: 0.5,
map: map,
radius: distance/2
};
circles[circles.length]=new google.maps.Circle(options);
circles[circles.length]=new google.maps.Circle(options2);
for(var i=0; i<=circles.length-1; i++)
{
circles[i].bindTo('center', marker, 'position');
}
Is there a way to avoid that?
This is an exciting question!
If you're upset about the repeating sin pattern, but actually want your circle to cover a geographic area on the earth defined by radius in meters then you're best bet is to increase the zoom level (or shrink the width of the map) to reduce the overall size of the are being presented. Alternatively, you could reduce the distance to a value that doesn't encompass the north pole (which is what I believe would trigger the awkward sin pattern)
If you're trying to draw a circle in the geometric, not geographic, sense then the Google Maps circle overlay isn't for you. Instead, you should use a GroundOverlay (rendering a transparent PNG server-side somewhere) or CustomOverlay (the technically more advanced solution). A CustomOverlay could include a DIV with a circle you've drawn using any HTML technique like CSS or an SVG.
I am trying to create polyline outlines and fills for each state. I need the state polyline to be clickable. Also, when viewed at greater zoom levels the fill looks fragmented. Any suggestions?
see code below:
function drawBorder(){
var Polyline_Path = new google.maps.Polyline({
path: newyork,
strokeColor: "#CD0000",
// color of the outline of the polyline
strokeOpacity: 1,
// between 0.0 and 1.0
strokeWeight: 1,
// The stroke width in pixels
fillColor: "#CD0000",
fillOpacity: 1,
clickable: true
});
Polyline_Path.setMap(map);
google.maps.event.addListener(Polyline_Path, 'click', function() {
alert('you clicked polyline');
});
}
this code does work to make the polyline clickable but only in a very specific area of the polyline. Is there a way to configure it to detect a click event anywhere in the state
I used the google.maps.Polygon instead and it took care of fragmenting and clickable issues
Pardon my noobishness, but, although I've seen this issue discussed, I haven't found an answer. I am trying to draw concentric circles on a Google Map using the API v3, making each clickable as on a bullseye target, but always the largest one ends up on top, which means it is the only clickable one.
The following uses an array called "subjects" that consists of increasing radii and various fillcolors.
for (i=0;i<subjects.length;i++) {
radi = subjects[i][0];
fillcolr = subjects[i][1];
zindx = subjects.length - i;
newcircle = new google.maps.Circle({
radius: radi,
center: centerPoint,
strokeWidth: 1,
fillOpacity: 1.0,
fillColor: fillcolr,
zIndex: zindx
});
// display it
newcircle.setMap(map);
// make outer circle clickable
google.maps.event.addListener(newcircle, 'click', function() {
circleClickedInfo(i);
});
The circles are there, the zIndex is set, but the biggest circle is always on top. I have tried setting zIndex on a pass afterwards, boosting each zIndex by 10000, reversing the order in which I create the circles, not setting the zIndex explicitly, etc. I'm sure I am missing something obvious (see the aforementioned noobishness), but I can't figure out what it is. TIA for any pointers...
Try this for every shape you need:
selectedShape.setOptions({zIndex:0});