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
Related
I have a Drupal ExtendedGmap View. View results show as markers on the map. Marker type is determined by a custom field (NOT a field on the content type, but rather a PHP field calculated from the View) so the first view result marker is set to 'orange' and all other row markers are set to 'green'. The problem I have is that I want my first (orange) marker to show above the others. I have found a way to change the first marker z-index value in THEME_preprocess_gmap_views_view_gmapextended function:
$vars['markers'][0]['opts']['zindex'] = '9999';
But this is not reflected on the map and the first marker is still buried (in fact the first marker ends up somewhere in the middle of the stack).
How do I get my first View row marker on top?
I tried the Javascript mentioned on this page but don't really understand it and it doesn't work for me.
Drupal.gmap.addHandler('gmap',
function (elem)
{
var obj = this;
obj.bind('preparemarker',
function (marker)
{
marker.opts.zIndexProcess =
function (marker,b)
{
return this.zindex ? this.zindex : -99999;
};
}
);
});
I am using Drupal 7 and Gmap 7.x-2.9
Found the problem. Googlemaps API V3 uses zIndex (capital 'I') instead of zindex. Changed that and works as expected - markers stack correctly.
Example code:
$vars['markers'][0]['opts']['zIndex'] = '9999';
How can I control the Zoom Level of my Google Map with hyperlinks? For instance I want three defined levels (Location in UK, UK in Europe, Europe in the World). Clicking on these links will display the map with a different zoom level.
I'm using Google Maps API v3
That shouldn't be too difficult to do.
When you create the map, you get a reference to the map object, e.g.
var mapOptions = {mapTypeId: google.maps.MapTypeId.TERRAIN};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Once you have the object, you can zoom to a specific level like this:
function zoomToLevel() {
map.setZoom(8);
}
So you'd just need to set the click event of your hyperlink to run the javascript function:
Zoom to level 8
For what you're doing though, it might be better to get the map to select it's own zoom level based on the area. This function is actually zooming to show the Pyrenees, but the idea could be used for any area, as long as your points are at diagonally opposite corners:
function zoomPyrenees() {
var startPoint;
var endPoint;
var boundsPyrenees;
startPoint = new google.maps.LatLng(43.373403, -1.774107);
endPoint = new google.maps.LatLng(42.482463, 3.129875);
boundsPyrenees = new google.maps.LatLngBounds();
boundsPyrenees.extend(startPoint);
boundsPyrenees.extend(endPoint);
map.fitBounds(boundsPyrenees);
}
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've just begun using the Google Maps API (v3.0) and have had a good deal of success so far. I am loading a set of objects with Latitude & Longitude values from a database, passing them into my script, and looping over them in the script in order to add them to the map.
I am using the "bounds.extend() / map.fitBounds()" method of setting the map's zoom & bounds (see code below), which works as expected the first time around; however, if I clear out the existing markers, fetch another set of objects, and do the same thing on the same map instance, it sets the bounds incorrectly, usually resulting in a minimum zoom (an astronaut's view).
My suspicion is that my map object has some memory of the previous set of bounds that I've given it and that I need to find a way to clear these bounds before assigning my new ones, but I really can't be too sure.
Any help is greatly appreciated!
var locationList = [];
for (var i = 0; i < mapPoints.length; i++) { // mapPoints is a collection of DTOs
var mapPoint = mapPoints[i];
var location = new google.maps.LatLng(mapPoint.Latitude, mapPoint.Longitude);
locationList.push(location);
var marker = new google.maps.Marker({
map: map,
icon: '/Content/images/map/' + mapPoint.Status.Icon,
shadow: '/Content/images/map/shadow.png',
position: location
});
markers.push(marker); // markers is an Array that is managed outside this loop
}
var bounds = new google.maps.LatLngBounds();
for (var j = 0; j < locationList.length; j++)
bounds.extend(locationList[j]);
map.fitBounds(bounds);
This isn't the answer, so to speak, but a (slightly hacky) workaround that I discovered on a thread in the Google Maps Javascript API v3 group:
//map.fitBounds(bounds);
setTimeout( function() { map.fitBounds( bounds ); }, 1 );
if the above answer doesn't work for you (it didn't for me), the problem might lie in bootstrap (assuming you're using it). bootstrap modals specifically generate all sorts of wonky behaviour when i embed a map object in it.. curiously correcting itself if/when i drop an 'alert' in there.. in any case, i solved all my problems by just building my own modal (ie, not using bootstraps modals).
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.