Well, I am not new to google map, but not very much experienced in it.
I want to know how to put a CUSTOM ICON right on the middle of a polyline ?
For clarity I attached an image, where you can see RED TRIANGLE is my custom icon, that I want to place right in the middle. I want this triangle to be CLICKABLE that will open a popup etc where I will place some form etc.
Here is the image:
http://oi61.tinypic.com/amxhkh.jpg
Please Guide me / help me with code etc.
Best Wishes and Billion Thanks in Advance !
ZH.!
A more simple way is set the symbol icon offset to 50%:
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var poly = new google.maps.Polyline({
strokeColor: color,
strokeOpacity: 0.5,
icons: [{
icon: lineSymbol,
offset: '50%'
}],
...
});
The method google.maps.geometry.spherical.computeLength() gives you the complete length of a polyline-path.
Based on this length walk through the path and use a little bit Math to find the middle(to get the distance between 2 points use computeDistanceBetween()).
Note: the geometry-library isn't loaded by default, see: https://developers.google.com/maps/documentation/javascript/libraries
Related
Please see the piece of code below :
Sample Html
There are two Polylines defined.
They are displayed OK, but both are displayed with Yellow color (even the first one is define with red color.
If I switch the definition order of the variables
var route1 =
var route2 =
to:
var route2 =
var route1 =
The routes will be displayed fine (yellow and red)
Can someone expalin to me what makes the difference here ?
Why is the order important ?
I have an automated process which creates the html code, and need to understand the reason for this behaviour.
Many thanks !!!
I cannot open your link but I think you can find your answer here: Drawing multiple polyline with different color using Google map api V3 ASP.net
Quoted top answer:
Certainly. For instance suppose you know what colours you want to go with each line, let's assume you therefore have an array of colours which has a length equal to DrivePath.length - 1.
var Colors = [
"#FF0000",
"#00FF00",
"#0000FF",
"#FFFFFF",
"#000000",
"#FFFF00",
"#00FFFF",
"#FF00FF"
];
Now, instead of drawing one polyline, draw a separate polyline for each coordinate.
for (var i = 0; i < DrivePath.length-1; i++) {
var PathStyle = new google.maps.Polyline({
path: [DrivePath[i], DrivePath[i+1]],
strokeColor: Colors[i],
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
}
I have 50 polygons on my google map, 25 of which end in '_6' and the other 25 ending in '_100' I was wondering if anyone could point me in the direction of an example where check boxes are used to toggle polygons on and off based on a variable such as the name?
Below is an example of the current options I have for one of the polygons, if someone could point me in the right direction that would be awesome!
var Zone_25_Distance_100 = new google.maps.Polygon({
paths: Zone_25_Distance_100,
strokeColor: '#48DD00',
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#48DD00',
fillOpacity: 0.01
});
google.maps.event.addListener(Zone_25_Distance_100, 'click', function() {
top.frames['GraphFrame'].location.href = 'Zone_25_100.html';
});
The method setVisible(bool) is what you are looking for. It hides or show a polygon on the map.
Here is the doc related to polygons
You would then only have to bind a click function to one of the checkboxes you have and call that method on the polygon you want hidden.
EDIT :
Supose your checkboxe's id is cbId and your polygon is Zone_25_Distance_100, it would look like this (using jQuery):
$('#cbId').click(function () {
Zone_25_Distance_100.setVisible(this.checked);
});
Without jQuery
document.getElementById('cbId').onclick=function(){
Zone_25_Distance_100.setVisible(this.checked);
}
I use custom marker Icon for google Maps. My problem is simple, transparent png that I prepared has extra 23px of empty space at the bottom - this is done for some photoshop glow effect, but an actual point of marker starts at 23px from bottom.
How do I take this into consideration so that marker lands on the right spot? I need something like margin-bottom:-23px; but with javascript.
Hard way would be to calculate 23px in latlong measures and than adjust marker position. But that would be insanely ugly...
Any ideas?
so far I've this:
var marker_icon = new google.maps.MarkerImage('<?php echo get_bloginfo("template_url"); ?>/images/marker.png', new google.maps.Point(10,10));
var marker = new google.maps.Marker({
position: latlngPos,
map: map,
icon: marker_icon
});
but since I changed icon: to the variable, I don't see marker anymore. Console tells me nothing.
image is this:
See the documentation on how to define a custom Icon
anchor | Point | The position at which to anchor an image in correspondance to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.
url | string | The URL of the image or sprite sheet.
google.maps.MarkerShape object specification
It is computed from the top left corner of the image (0, 0). But you haven't provided the size.
Developers Guide (with example)
Your image is 59px × 72px
So I think the anchor should be 72-23: new google.maps.Point(30,49);
var marker_icon = {
url: <your url>,
size: new google.maps.Size(59,72),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(30,49)
};
Solution was to do it this way:
var marker_icon = {
url: '<?php echo get_bloginfo("template_url"); ?>/images/marker.png',
size: new google.maps.Size(59,72),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(29,58)
};
Thank you geocodezip for the direction.
I am working on GMap customization. I want a floating circle to move across a a Polyline. My question is that can we get all LatLng points in a Polyline after a specific interval for eg, all LatLng at interval of 100meters. My polyline code is:
/** polyline **/
var tpath = [
new google.maps.LatLng(15.508718,73.839337),
new google.maps.LatLng(15.511457,73.839165)
];
var travelPath = new google.maps.Polyline({
path : tpath,
map : map,
geodesic : true,
strokeColor : '#000',
strokeOpacity : 0.7,
strokeWeight : 1
});
i get only the end LatLng values. I want the values across the Polyline.
Thanks in advance.
You could use google.maps.geometry.spherical.computeHeading(startPoint, endPoint) to get the heading.
Then compute the distance with google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint)
If the distance is 475m and you want to make ~100 jumps just do 475/round(475/100) to calculate the distance you want to move the circle each time. round(475/100) will give you how many times (iterations) you should move the circle.
Then you could use computeOffset(from:LatLng, distance:number, heading:number, radius?:number)
Then you can use computeOffset(circleCenter, distance, heading) to get the new cirecle center point in a for loop the amount of iterations calculated above. Don't forget to include a delay in your loop.
I don't know how to get it with google maps api but you can draw a line to get the points from a start and end manually. It's simple math for a drawing a line and calculate.
You can set On click listener on Polyline by using GoogleMap.OnPolylineClickListener, after it returns the polyline you click on.
List<LatLng> mPoints=polyline.getPoints();
be sure to make your polyline clickable by setting.
lineOptions.clickable(true);
I'm in a bit of a pickle here. I've set up a google maps object that shows airport locations using markers. I've even enabled clustering to a certain extent. The thing is that I need to include a filter which would allow users to:
Filter and show certain types of airports i.e by clicking on a corresponding check box
SHow markers within a certain distance from a central point. Like show all markers within a radius of # miles. A user can enter a value in a text field to see this or use a slider control.
I'm quite stuck with respect on starting this out - I need some help on this.
What you can do is draw your circle (in response to user input). Then draw the markers that fall within that bounds. Each time you redraw the circle, also redraw all the markers.
// draw a circle of appropriate radius
var circleOptions = {
center: destinationLatlng,
radius: 500, // or value from some formfield, in metres
fillColor: "#FF0000",
fillOpacity: 0.2,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 1
};
var circle = new google.maps.Circle(circleOptions);
var bounds = circle.getBounds();
// loop over your markers, and only draw the ones that are within these bounds
for (var i = 0; i < arrMarkers.length; i++) {
if (bounds.contains(arrMarkers[i].getPosition())) {
// only do setMap if the marker wasn't already visible
if (arrMarkers[i].getVisible() != true) {
arrMarkers[i].setMap(map);
arrMarkers[i].setVisible(true);
}
} else {
// remove the ones that are not within the circle's bounds
arrMarkers[i].setMap(null);
arrMarkers[i].setVisible(false);
}
}
You'll notice I do both setMap and setVisible. This is so that I can then use getVisible to determine if I need to redo setMap (so avoiding unnecessary function calls to setMap - I think I had an issue with flickering).
All this should be within a function that happens in response to user input, e.g. when they submit the form that asks for the radius (or as they slide the slider). This should also maybe be called from within your initialize function (if you want to draw a circle at the very start as well).
Of course this assumes you actually want to display a circle on your map showing that radius; I find this useful. However if you don't, you can use exactly the same message, but just set the fillOpacity and strokeOpacity to 0.0.
Organize references to markers into categories when you add it to map:
var markers = { cat1: [...markers...], cat2: [...markers...] }
When user selects cirtain type - just set or unset map for that markers in markers.catN