I have two polylines on the map:
Polyline 1 as route
Polyline 2 as other
I want to clear only one. How can I do that?
I have tried with:
$('#map_canvas').gmap('clear', 'overlays > Polyline').route
But it does not work.
$('#map_canvas').gmap('addShape',
'Polyline', {
tags:'other',
property: 'tags',
path: other_positions,
strokeColor: '#ff0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
$('#map_canvas').gmap('addShape',
'Polyline', {
tags:'route',
property: 'tags',
path: array_positions,
strokeColor: '#0000ff',
strokeOpacity: 1.0,
strokeWeight: 2
});
When clicking a button, I want only this polyline (route) to be cleared while it clears both
I suppose you just have the code portion that has the path =>array_positions
$('#map_canvas').gmap('addShape', 'Polyline', { tags:'route',
property: 'tags', path: array_positions,
strokeColor: '#0000ff', strokeOpacity: 1.0, strokeWeight: 2 });
Getting rid of the Poly line that displays the other positions.
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.
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 developed a website using Google Maps direction. My Polyline configuration is as following:
var lineSymbol = {
path: 'M 1.5 1 L 1 0 L 1 2 M 0.5 1 L 1 0',
fillColor: 'black',
strokeColor: 'black',
strokeWeight: 2,
strokeOpacity: 1
};
var pl = new google.maps.Polyline({
strokeColor: '#426289',
strokeOpacity: 0.8,
strokeWeight: 5,
icons: [{
icon: lineSymbol,
offset: '25px',
repeat: '100px'
}]
});
With this parameters, my Polyline looks like below image
I wonder what is the Google Maps new website Polyline parameters (it looks embossed) ?
I don't see any options on PolyLineOptions to create that 3d effect. You may consider draw 2 polylines, one thick (e.g. 5px width) and thiner one (3px) on top. Or render with TileOverlay https://github.com/dan-silver/Android-Street-View/blob/master/demo/src/com/google/maps/android/utils/demo/TileProviderAndProjectionDemo.java.
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'm trying to draw an ellipse on a google map using svg-shapes.
The following path (a star) works fine:
var goldStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: "yellow",
fillOpacity: 0.8,
scale: 1,
strokeColor: "gold",
strokeWeight: 14
};
But thisone(an eliptical arc) does not show at all.
var elipticalarc = {
path: 'M 0,0 a20,10 0 1,1 100,100',
fillColor: "yellow",
fillOpacity: 0.8,
scale: 1,
strokeColor: "gold",
strokeWeight: 14
};
You can se both paths working by replacing the path with the d-attribute in the following link:
http://www.w3schools.com/svg/tryit.asp?filename=trysvg_path
It turned out it was just really tiny.