I have a problem with google.maps.geometry.poly.isLocationOnEdge() method. In fiddle, try to click on horizontal line, returns true like expected, but clicking on vertical line returns false. Why?
Thanks!
Here is fiddle and here is code:
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(0.5, 0.5),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var poly = new google.maps.Polyline({
path: [
new google.maps.LatLng(0, 0),
new google.maps.LatLng(0, 1),
new google.maps.LatLng(1, 1)
],
map: map
});
google.maps.event.addListener(poly, 'click', function(event){
alert(google.maps.geometry.poly.isLocationOnEdge(event.latLng, this), 0.00001);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I think you are better off using containsLocation()
From the docs :
To find whether a given point falls within a polygon, pass the point
and the polygon to google.maps.geometry.poly.containsLocation(). The
functions returns true if the point is within the polygon or on its
edge.
vs
To determine whether a point falls on or near a polyline, or on or
near the edge of a polygon, pass the point, the polyline/polygon, and
optionally a tolerance value in degrees to
google.maps.geometry.poly.isLocationOnEdge().
If you use containsLocation it works
alert(google.maps.geometry.poly.containsLocation(event.latLng, poly));
forked fiddle http://jsfiddle.net/VL7Rx/
I really cant explain exactly why it does not working with isLocationOnEdge. It seems to be an issue on 100% vertical polylines only, and with your 0,0,0,1 etc the Lng always is zero (0) (clicking vertical) - as if the line does not have any "width" at all, "mapwise".
containsLocation works only in the fiddle by davidkonrad if your listener is for clicks on the polyline. If your listener is on the map instead you will get 'true' anywhere in the triangle formed by the 3 LatLngs. If the user can't click the map itself then this is fine, but it may not work for your specific requirement.
Sadly, I can't see why the vertical line isn't working either (but it isn't just vertical lines, it doesn't seem to be working on any line that isn't horizontal).
Related
I couldn't quite find anything current that relates to this question, so I wanted to ask...
If you go to Google Maps (via maps.google.com), so long as your location is on, it will set you by default at zoom level 15. Now, on Google Maps API, you can specify zoom just fine - it's the scrolling steps that are different. Whereas in the API, you can only step by +/- 1, the motherbase Google Map however, steps +/- .01 -- decimal places!
To test this out myself (I never thought to try it before), I threw in some decimals to my zoom level, and it works! But it is really... Blurry.
var map = new google.maps.Map( document.getElementById('map'), {
center: {
lat: 38.8563801,
lng: -88.3202496
},
zoom: 9.27,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
});
It's apparent that the API might only serve tiles by those specific zoom levels, but is it possible to get high quality map tiles with decimal stepping, as the main Google Map does?
EDIT:
API
Google's
I first posted this as a comment but thought I'd develop a bit more.
I had never tried a non-integer zoom level as the documentation says:
Valid values: Integers between zero, and up to the supported maximum zoom level
for the zoom property, and I never saw any documented way of achieving this.
There is this feature request though, to which you can subscribe. But don't expect this to happen any time soon...
Intersting thing is
map.setZoom(1.5);
map.getZoom(); // Outputs 1.5
So I thought, maybe you can use this with your own imagery, but...
var customMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
console.log(zoom); // Outputs 1
}
});
So that doesn't work. In other words, I suppose you are stuck with integers for now.
I'm using OpenLayers to display a world map on my site. The map wraps to either side, and, in the repeated sections, the coordinates are bonkers.
The pins on the map can be moved. If we move them over to a repeated section, instead of getting the actual coordinates of that spot on the globe, we get an invalid coordinate set which makes that pin disappear from the map altogether.
Here's the code I'm using for the map:
this.maps.vectorSource = new ol.source.Vector({
});
this.maps.vectorLayer = new ol.layer.Vector({
source: self.maps.vectorSource
});
this.maps.rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM({wrapDateLine: false})
});
this.maps.map = new ol.Map({
target: 'map',
interactions: ol.interaction.defaults({mouseWheelZoom:false}),
layers: [self.maps.rasterLayer, self.maps.vectorLayer],
view: new ol.View({
center: ol.proj.transform([-98.583333, 37.833333], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
You can see I've tried setting the wrapDateLine option to false, but this doesn't have any effect best I can tell.
I'd like to solve this either by preventing the map from repeating or by ensuring the repeating sections report proper coordinates. At this point, I don't much care which. Any ideas how I can achieve one of these two results?
Depending on your version of OpenLayers, you may need to use different options to disable the horizonal repeat. Try adding the following options to your OSM source:
wrapX: false,
noWrap: true
I've made a jsFiddle with a slightly modified version of your code to illustrate:
https://jsfiddle.net/fg1oxpu0/
Anthony got me going in the right direction with his answer. We were using OL 3.1.1 which doesn't support wrapX. I updated to 3.2.0 and was able to turn off wrapping. However, this created a both a UX problem (the map now ends on either side and the user needs to manually move back to the other side) and a UI problem (our wide area for map display is now mostly empty).
I tried moving up to the latest version (3.7.0) which, I noticed, began wrapping the vector layer. (Vector wrapping was lost in the move to OL 3 but was restored later.) This allowed me to turn my map wrapping back on, and the pins are drawn on each repeat of the map. It also now reports the correct coordinates even on the repeated maps.
I have to show only one location at a time in the Google map with a marker.
I tried to use auto zoom & auto center using the following code:
var bounds = new google.maps.LatLngBounds();
bounds.extend(latlng);
map.fitBounds(bounds); // auto zoom
map.panToBounds(bounds); // auto center
Also tried with the following:
var bounds = new google.maps.LatLngBounds();
bounds.extend(latlng);
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
Both the above solutions are giving the maximum zoom, since I am showing only one location in the map. With this maximum zoom I was not able to see the surrounding locations in the map.
Is there any solution to set zoom which gives a better view of map.
Giving the best zoom size (like 8, 9, 10....) which fits for all the locations also considerable one.
Thanks,
Gopal.
Please Refer link: http://jsfiddle.net/ZqhPM/3
var mapOptions = {
center: new google.maps.LatLng(39.8634242, -97.28818149999998),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
If you want to increase zoom level. please change zoom option in mapOptions.
I need a specific zoom size which is optimistic for most of the location types like - Street, State, Country
If you know the street, state or city, the geocoder will return a google.maps.LatLngBounds object for that geocoded result (and sometimes 2, a viewport and a bounds, see the documentation).
State (Massachusetts)
Country (France)
Street (Broadway, Arlington, MA)
I want to browse a single image with the Google Maps API, for which I've defined my own projection. I wanted to use a GroundOverlay instead of several image tiles, because I only have one small-resolution image, but I wanted it to still be zoomable. However, I get some erratic behavior when trying to work with this projection:
No overlays show up at all at zoom level 0.
At zoom level 1 and higher, Markers show up, but GroundOverlays still don't.
However, I can get GroundOverlays to show up very briefly, if I zoom out from any level. It will only show while it's zooming out and disappear again immediately. Also, while it does show up shortly, it does not show up at the right coordinates, but the Markers do.
I'm rather new to the API, so I would not be surprised if it was a simple oversight on my part, but I just can't see what could cause this. Here is the code for my projection, which just maps the lat/lng linearly to map coordinates:
function EvenMapProjection() {
var xPerLng = 512/360;
var yPerLat = 512/180;
this.fromLatLngToPoint = function(latlng) {
var x = (latlng.lng()+180)*xPerLng;
var y = (latlng.lat()+90)*yPerLat;
console.log('Lng', latlng.lng(), 'Lat', latlng.lat(), '-> Point', x, y);
return new google.maps.Point(x, y);
};
this.fromPointToLatLng = function(point) {
var lat = point.y/yPerLat-90;
var lng = point.x/xPerLng-180;
console.log('Point', point.x, point.y, '-> Lng', lng, lat);
return new google.maps.LatLng(lat, lng);
};
}
An example of what I'm trying to do without the projection (using the default Mercator projection):
http://95.156.209.71/tmp/a.html
The same example with the projection as defined above:
http://95.156.209.71/tmp/b.html
And finally an example using the projection but without the GroundOverlay, and instead just using tiled images (always the same image):
http://95.156.209.71/tmp/c.html
The last link also shows the Marker at LatLng(0, 0) appear at zoom level 1 (or higher), but not at level 0.
Is there something I'm just missing, or some buggy code, or is this actually a problem in the API?
I just found out that my mistake was in the definition of the ground overlay. I was at zoom level 0, which meant that I set the bounds for the overlay from (-90,-180) to (90,180), but the API seems to have issues with these levels, because they wrap longitude, hence I got weird errors. I adjusted it to be at level 1 for minimum zoom, and set the overlay from (-45,-90) to (45,90), and now it all works fine.
I wonder whether someone may be able to help me please.
I'm using this page to allow users to view markers saved in a MySQL database and to geocode/reverse geocode new marker positions.
I'm able to correctly center the map on the marker which is being loaded from the database, but the problem I'm having is that the map zooms in to it's maximum setting, whereas I would like to be able to set this manually.
I've tried adding another zoom control into my script here:
// add marker
var bounds = new google.maps.LatLngBounds();
var loc = new google.maps.LatLng(las[i],lgs[i]);
var marker = new google.maps.Marker({
position: loc,
map: window.map,
zoom: 8,
title: nms[i]
});
bounds.extend(loc);
map.fitBounds(bounds);
Unfortunately this has no affect. I appreciate that to some this may be a very minor fix, but I've been looking at this for sometime and I just can't seem to find a solution.
I just wondered whether someone may be able to look at this please and let me know where I've gone wrong?
POST UPDATE
I have worked out a solution using exisitng code and that suggested by #Andrew Leach. The working solution is:
// add marker
var bounds = new google.maps.LatLngBounds();
var loc = new google.maps.LatLng(las[i],lgs[i]);
var marker = new google.maps.Marker({
position: loc,
map: window.map,
title: nms[i]
});
bounds.extend(loc);
map.fitBounds(bounds);
map.setZoom(16);
Remove the references to the bounds.
You add a marker to the map, and create a LatLngBounds object which contains only that single point. You then ask the map to zoom in to fit the bounds into the map's viewport. Fitting a single location into the viewport will always zoom in as far as it can, and even then a single point can never fill the entire viewport.
However, adding zoom to the marker options won't work either, because zoom is not a valid option. Documentation
Instead, set the map's zoom explicitly, either with map.setZoom(8) or by including the zoom option in the map's options when you set it up.