I have a polygon drawn on map and it has to be a specific area where ONLY THERE can be drawn a polyline (some sort of geofencing)? Is it possible to do so?
I though of editable and clickable, but its not exactly what i want to do...
I actually found out the solution.
There is the code (in case someone will need it)
function addLatLng(event) {
var path = poly.getPath();
if(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle)){
path.push(event.latLng);
console.log(path);
}
}
Related
I need to highlight a section of a street between two intersections. I have found a similar question which was asked more than a year ago (see here) which says that Google, Bing, etc. do not provide street data through their APIs. Does anyone know if anything has changed in the APIs, and whether I can get street location latitude/longitude data from somewhere now?
I have done this in API V2, but it should not be to difficult to rewrite it for V3.
Have a look at this website http://www.fvs.de/anfahrt.php (in German) and click the "Weg in Karte zeigen" buttons ("show way in map") in the sections below the map. Each button highlights another street line in the map.
It is basically done by using directions object of Google Maps to plot a route between two arbitrary street points in the map (e.g. your two intersections). The points must be encoded with their LatLng coordinates. Here is a code example (as said this is API V2):
function initMap() { // called by page onload event
if (GBrowserIsCompatible()) {
// Display the map, with some controls and set the initial location
gMap = new GMap2(document.getElementById("map_canvas"));
gMap.addControl(new GLargeMapControl());
// ...
gMap.setCenter(GLatLng(49.238326, 6.977761), 15);
// init directions object and attach listener to handle route loads from function highliteRoute()
gDir = new GDirections();
gPoly = null;
GEvent.addListener(gDir, 'load', function(){
gPoly = gDir.getPolyline();
gMap.addOverlay(gPoly);
// zoom & pan to poly
var polyBds = gPoly.getBounds();
var polyZoom = gMap.getBoundsZoomLevel(polyBds);
gMap.setZoom(polyZoom);
gMap.panTo(polyBds.getCenter());
});
}
}
function highliteRoute(){
if(gPoly!=null) gPoly.hide();
gDir.load('from: 49.313530,6.969109 to: 49.238326,6.977761', {getPolyline:true});
}
Dear all. I'm pretty new in coding with location, so be nice.
I have a list of location (lat & lng), that could be really anywhere (ie : all in the same city ; one in bangladesh and one in paris...).
When initializing google map, I would like to center on the barycentre on these location.
So this is my first question : How to calculate a barycentre with location object
Then, I would also like the initial map do display all the location (markers). So this is a problem of zoom, and is my second question : How to calculate the zoom in a google map so that all the markers on the map are displayed
I hope I've been clear. Also, take note that I was meaning barycentre with all points coefed to 1.
Best regards.
To zoom to include a set of results:
var locations = new google.maps.LatLngBounds();
...
function zoomToViewports(locations) {
var bounds = new google.maps.LatLngBounds();
for (var i in locations) {
bounds.union(locations[i].geometry.viewport);
}
map.fitBounds(bounds);
}
Having done that, the barycentre is in the middle of the screen, so if you actually need it's value it's easily calculated [(max(lat)-min(lat)/2,(max(lng)-min(lng)/2]
HTH?
You are welcome to lift the JS from this page on my website, which does what you describe
There are about 100 markers on a google map plus there is one special marker that needs to be visible. Currently, the markers around it hide it totally or partially when the map is zoomed out. I need that marker to be fully visible and I think keeping it on top of all other markers should do the trick. But I cannot find a way to modify its stacking order (z-index).
This is for Google Maps API 2.
For Google Maps API 3 use the setZIndex(zIndex:number) of the marker.
See:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
Use the zIndexProcess option in GMarkerOptions when you create the marker that you want on top. For example:
var pt = new GLatLng(42.2659, -83.74861);
var marker = new GMarker(pt, {zIndexProcess: function() { return 9999; }});
map.addOverlay(marker);
I believe the default is to have a z-index that is the latitude of the point of the marker, so this should be fairly safe at bringing a single marker to the front. Further, this was just a simple example; you can set the z-index of all your markers in whatever simple or complex way you want. Another example is to have two functions: one for special markers and one for the rest.
var pt1 = new GLatLng(42.2659, -83.74861);
var pt2 = new GLatLng(42.3000, -83.74000);
var marker1 = new GMarker(pt1, {zIndexProcess: specialMarker});
var marker2 = new GMarker(pt2, {zIndexProcess: normalMarker});
map.addOverlay(marker1);
map.addOverlay(marker2);
function specialMarker() {
return 9999;
}
function normalMarker() {
return Math.floor(Math.random()*1000);
}
Adding on to jhanifen's answer, if you want to get your one special marker to be on top of all the rest, set it's zIndex to google.maps.Marker.MAX_ZINDEX + 1. This will make sure that it is on top of any marker on the map.
Pretty simple request, but there doesn't seem to be a way to do it. I just want my GMarkers to be green instead of red.
Do I really have to make my own icons?
This is the simplest method:
var greenIcon = new GIcon(G_DEFAULT_ICON);
greenIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png";
var markerOptions = { icon:greenIcon };
var marker = new GMarker(point, markerOptions);
That marker image is Google's, but you could also use your own.
MapIconMaker is great if you need to generate unique markers on the fly.
The best way I have found is with the following scripts...
labeledmarker.js
mapiconmaker.js
you then need the following code snippet:
var iconOptions = {};
iconOptions.width = 32;
iconOptions.height = 32;
iconOptions.primaryColor = "#66CC6600";
iconOptions.cornerColor = "#66CC6600";
iconOptions.strokeColor = "#000000FF";
var iconSeller = MapIconMaker.createMarkerIcon(iconOptions);
function createMarker(icon, point,html,label)
{
opts =
{
"icon": icon,
"labelText": label,
"labelClass": "markerLabel",
"labelOffset": new GSize(-4, -31)
};
var marker = new LabeledMarker(point, opts);
GEvent.addListener(marker, "click",
function()
{
marker.openInfoWindowHtml(html);
});
return marker;
}
Make sure you have a class in your stylesheet called markerLabel so you can style the div which contains the label. I pinched most of this code from the excellent econym tutorial site where there are many clear examples and code samples.
See this: Map Overlays > Markers > Icons
Icons
Markers may define an icon to show in
place of the default icon. Defining an
icon is complex because of the number
of different images that make up a
single icon in the Maps API. At a
minimum, an icon must define the
foreground image, the size of type
GSize, and an icon offset to
position the icon.
The simplest icons are based on the
G_DEFAULT_ICON type. Creating an
icon based on this type allows you to
quickly change the default icon by
modifying only a few properties.
It looks like this is the simplest case. You use G_DEFAULT_ICON as the base GIcon, then extend it by altering the .image property of that new object. The simple example is pretty simple.
I need project for add gmarker in map and getting data from web services
i am using GoogleMaps and i have 2 or more markers and they are draggable.
I want to snap 2 markers if they are near and merge them into 1.
is this possible ?
Can someone give me pointers .. how i can realize that ?
You need to handle the drag event on the GMarker object. The trick is what do you do when you detect that you are near enough to another marker to snap them together. I played around a little with this and thought maybe hiding the currently dragged marker might be a good way to go.
GEvent.addListener(marker, "drag", function(point) {
// iterate over your points and for each otherPoint...
if (near (point, otherPoint))
{
// hide this marker
marker.hide ();
// move nearby marker to indicate merge?
// then delete the dragged marker on the dragend (if it was merged)
}
}
Not an entirely elegant solution, but it might suit your purposes.
Edit: I wondered if you were looking for the code to check nearby points, so I updated my example to do that:
function near (point1, point2)
{
sw = new GLatLng(point2.lat() - 0.005, point2.lng() - 0.005);
ne = new GLatLng(point2.lat() + 0.005, point2.lng() + 0.005);
var bounds = new GLatLngBounds(sw, ne);
if (bounds.contains (point1))
return true;
return false;
}