I'm working on understanding user events in Google Maps. Here's my sample code:
var listener = google.maps.event.addListener(map, 'rightclick', function(e){
console.log(JSON.stringify(e, null, 4));
});
The console returns:
{
"latLng": {
"lat": 36.29330392714158,
"lng": -115.24877548232325
},
"pixel": {
"x": 581.5555419921875,
"y": 374.7916578363487
},
"ca": {
"x": 46.04531521257013,
"y": 100.26925500235961
}
}
So I understand Latitude and Longitude.
The Pixel coordinates seems to represent the display on my webpage (with html canvas like output) When I move the cursor to the upper left corner of the visible map element in my web page, and right click, the console shows nearly 0,0 . Lower right hand corner matches to the pixel height / width of my display. So I can deduce that the Pixel feedback represents the display on my webpage.
I don't understand the context for a 'ca'? In fact what is a 'ca'? Anybody know? Is that an abbreviation for something? I can see that the 'ca' value barely changes when I right click on different areas of the visible map. I have no clue where 'ca' 0,0 ends up. How would you use a 'ca' element, what is it for? Anybody have an official reference? Many thanks.
The ca is an undocumented property of the object created by the closure compiler.
It will (or at least can) change with every release of the API so should not be used.
Related questions:
Google.Maps.Event settings - Va versus Xa
Google Places coordinates changing keys
Google Map Api Uncaught TypeError: Cannot read property '0' of null
Google Maps API V3 - only showing a blank map when using the geocoder
-Google maps - Weird geometry.location attributes (G, K)
Google maps api: what are xa and pa in get bounds?
item.geometry.location.kb & item.geometry.location.jb returning undefined
Related
Is there a way to tell google maps street view you want to be above/under another road? I have a path that takes someone around a cloverleaf and back out the other way, but when I set the location on the bridge it always sets them to on top of the bridge.
current code
lineClickEventHandler(latLng: google.maps.LatLng) {
this.panoramaMap.setPosition(latLng)
this.drivingData.heading = Math.round(this.routeService.getCurrentHeading(latLng, this.polyLine))
this.panoramaMap.setPov({
heading: this.drivingData.heading,
pitch: 0
})
Afaik there is no way to select a level for a set of coordinates.
If you are following a Street View "path" on the below level and don't want the API to "move" you to the top road, you could use the returned links of the current panorama you are on.
As stated in the documentation each panorama has links to adjacent panoramas in the form of a collection of StreetViewLink objects.
The getLinks() method of the StreetViewPanorama class will return the same collection.
For example:
0: {description: "", heading: 97.73429107666016, pano: "zVIPHTGA5Pu4os139DS5sw"}
1: {description: "", heading: 277.2002563476562, pano: "wSLR0N4qAw-_Ib2Q69HvTw"}
If you know your heading (more or less) or say, the direction you are currently intending to move, you could compare it with the heading contained in the links and load the corresponding adjacent pano by its id.
Hope this helps.
Edit:
I did a small proof of concept to see if I could follow that road automatically based on a base heading and the provided StreetViewLink objects but unfortunately that seems buggy...
For some reason — and although Street View imagery is available to continue "straight ahead" on the same road — the adjacent links somehow start referencing the top road at some point. I don't know why this happens.
Here is my fiddle. Watch your javascript console and the map while it moves along the road.
It would be interesting to test that in other places and figure out if this is a local issue or if it happens in other places as well... My guess is that it will happen in other places too.
I looked at many SO questions referring to a similar topic:
Google Maps API V3: How to get region border coordinates (polyline) data?
Google has started highlighting search areas in Pink color. Is this feature available in Google Maps API 3?
Add "Search Area" outline onto google maps result
Where do Google and Twitter source political boundaries of cities, regions and states?
And searched for online tools and tools within my country and too:
https://market.mashape.com/vanitysoft/boundaries-io/overview
https://market.mashape.com/vanitysoft/boundaries-io
http://mapit.openpolis.it/postcode/00188.html
But no one of them fits with the task I need to complete (and I tell you why right after explaining the task I have to do):
Basically all I want is, for each Italian post code (called CAP in Italy) (as of 2015, they are 8709 and I have them all stored in a database's table), find its area coordinates (therefore something like an array with the following structure (it can be a JSON, KML, XML, it doesn't matter as long as the coords are truthful and I can somehow parse them):
[
[ [lat, lng], [lat, lng], [lat, lng], ... ], // Polygon 1
/*
* This additional arrays may be here in the case
* where a CAP (Italian postal code) is made up of many areas,
* therefore each area is a polygon.
*
* For example here -> https://www.google.it/maps/place/84020+SA/#40.605482,15.1783416,10.32z/data=!4m2!3m1!1s0x13396999456508e7:0x1c09e123127ecbc0
*
*/
[ [lat, lng], [lat, lng], ... ], // Optional Polygon 2
...
[ [lat, lng], [lat, lng], ... ] // Optional Polygon n
];
So that I can draw them with a google.maps.Polygon or a custom overlay extending the google.maps.OverlayView class on a map. The coordinates of the areas I need are shown by Google here:
https://www.google.it/maps/place/20122+Milano/#45.4628212,9.1931976,13z/data=!4m2!3m1!1s0x4786c6af4dceb2f5:0x1c0678057ae1afc0
Or here:
https://www.google.it/maps/place/84020+SA/#40.605482,15.1783416,10.32z/data=!4m2!3m1!1s0x13396999456508e7:0x1c09e123127ecbc0
But I can't find a way to get them in my application and I didn't find such a guide on their site at https://developers.google.com/maps/documentation/. Also, in the SO questions I linked the answers say that Google doesn't provide this data, but, as of 2015, maybe they have changed something?
Now, why no one of the features I have found suits my needs:
They all address to United States' zip codes only;
The local Italian site I have found (mapit.openpolis.it) doesn't return the coords for the polygon area but just the a single pair of lat and lng which points to the center of the postal code and also doesn't return anything for some postal codes (CAPs).
What could I do? Is there a way to contact a responsible of the Google Maps API team and ask him what should I do in such a case? (And I am pretty serious so don't laugh at me...).
Thanks for the attention.
You can check out the postal boundaries from open street map.
This question already has an answer here:
Can the Google Maps API base map be used as an overlay above a custom map layer?
(1 answer)
Closed 7 years ago.
I have an image overlay that displays high-resolution imagery over the selected Google map (See an example of this in the Google API Examples). When in satellite view, this works very well. However, when the user switches to the hybrid view, I noticed that none of the labels or streets are shown over my map overlay. Does anyone know a way to get the streets and labels to be displayed on top of my map overlay?
-- BEGIN EDIT --
I did find a similar question here. However, I can't figure out how to not get a duplicate data street/label layer on the portion of the map where my custom overlay has no imagery. If this is the best solution, then is there a way to hide the labels when the selected map type id is HYBRID?
I think you need to do two things:
Add your custom tiles as the base map layer
Add a StyledMapType with labels only to the overlayMapTypes of your map
Adding custom tiles as the base map layer
Refer to this example to create an ImageMapType, which I'm guessing is what you want in order to use your own custom map type tiles.
Adding a StyledMapType with labels only
You can create a StyledMapType:
var featureOpts = [{
elementType: 'geometry'
stylers: [
{ visibility: 'off' }
]
}];
var labelsOnlyMapType = new google.maps.StyledMapType(featureOpts, {
name: 'Labels Only'
});
You can then put it into the Map's overlayMapTypes.
// assuming you made a Map called 'map'
map.overlayMapTypes.insertAt(0, labelsOnlyMapType);
I'm just going by what I think should happen here, but what you should end up with is
your tiles on the bottom as the base map
the StyledMapType with labels only appearing on top of the map
I'd like to drag an object into my Google Map (API V3) from outside the map.
After some research, I found this very helpful post and I tried to adapt it to my project.
The main idea is to drag a .png image on the map and when the mouse button is down, get the actual coordinates and place a marker at that lat / lng.
But I noticed there is a difference between the point you drag your image and the point where your marker is placed. The difference is around 10 / 15 pixels on the sample linked above, regardless the zoom level. At max zoom, it's not very important, but the more you unzoom, the more the gap is important.
Illustration of the gap :
On my website, I'm trying to drag the green marker from outside the map to the South of Leman Lake, near to Geneva : (we are just BEFORE the mouse up, this is still my .png image)
And when I mouse up, the "real" marker is put here :
(we are at 100 kms / 60 miles of the wanted place...)
So, why such a gap ? In the sample I linked above, the gap is less important, but it also exists. There are no error in my browser's console, and it doesn't seem to be a tricky CSS problem.
Do someone knows how to correct this problem ?
Thank you
The calculation of the marker-position is not exact.
the offset of the map also must be used inside the calculation(when the map is not placed at the top left corner of the page)
the anchor of the marker by default is the bottom-center , but the script simply takes the position provided via the event-argument, what may give different results, depending on the point inside the image where you grip it.
Fixed function:
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e,ui) {
var mOffset=$($map.getDiv()).offset();
var point=new google.maps.Point(
ui.offset.left-mOffset.left+(ui.helper.width()/2),
ui.offset.top-mOffset.top+(ui.helper.height())
);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
placeMarker(ll);
}
});
});
I'm working with the Flash Api for Google Maps in my Actionscript/Air project. I now need the latLngBounds (the top left, top right, bottom right and bottom left) values of the current view of the map. The function map.getLatLngBounds should do that, but it always gives me a really low lat/lng bounds back.
Always somewhere around:
MapBounds{ lat: { hi: 0.8147270895329215 , low: 0.814011505887222 }, lng: { hi: 0.19547530117504353, low: 0.19447761445167258 } }
It's always between 1 and -1. It that how it should be? If it is, How do I use that LatLngBound to determine if a certain LatLng (for example { lat: 47.315383, lng: 12.750291 }) lies inside the boundary?
http://code.google.com/intl/nl-NL/apis/maps/documentation/flash/reference.html#IMap.getLatLngBounds
It's been a while since I've worked with Google Maps Flash API, so I don't remember as much as I'd like to be able to help with this question, but based on what you said, you can try creating a new LatLngBound with the getNorth() functions so that you are checking against the right values instead. It's merely a workaround, and I'm not even sure it will work.
Google map coordinates are not always intuitive though. You might want to look at some of the methods that translate coordinates. It's most likely returning what it thinks is correct based on the zoom level and viewport, but not what you would expect. I'll update this post later if I think of something else.