I want to show a popup window where i am going to show a leaflet map. In the popup window i'll show the path between two points. These two points are two [lat,lon] pairs
Point A is [lata,lona], Point B is [latb,lonb]. I want to set the view or or zoom level of the map so that the map is zoomed focusing the distance between point A and Point B. That means the map will have point A at near of one end of the map and point B at near of other end of the map. How can I do it. I am now using the following command to setview to to Point A and point A remains at middle. Here is my command
map.setView([A[0],A[1]],14);
So the point A is at the middle but the point B sometimes go even outside map. I want both A and B to be shown at map and the farthest distance within the map.
Use the fitBounds method instead of setView if you want to focus the map to an area rather than a point.
Related
I know that Google Maps provides an API for getting static images:
https://developers.google.com/maps/documentation/static-maps/intro
However that API gets as input a center point, zoom level and output image size.
In my case, I need an image that fits a given area taking as input the NW (top-left) and SE (bottom right) coordinates describing the rectangle of my area. I don't see that option within Google Maps API, so I'm wondering if there is another way to accomplish this.
You can omit the center and zoom parameters if you specify at least one marker. In this case you can show a certain area with a marker.
For example, I have bounds of Barcelona in Spain:
41.320004,2.069526 and 41.469576,2.22801
I can easily calculate the center position of the bounds:
41.39479,2.148768
Now, let's put a marker in the center of bounds and use the visible parameter of Static Maps API to specify NW and SE.
visible (optional) specifies one or more locations that should remain visible on the map, though no markers or other indicators will be displayed. Use this parameter to ensure that certain features or map locations are shown on the Google Static Maps API.
https://maps.googleapis.com/maps/api/staticmap?size=600x400&markers=icon%3Ahttp%3A%2F%2Fwww.google.com%2Fmapfiles%2Farrow.png%7C41.39479%2C2.148768&visible=41.320004%2C2.069526%7C41.469576%2C2.22801&key=api_key
Code snippet
<img src="https://maps.googleapis.com/maps/api/staticmap?size=600x400&markers=icon%3Ahttp%3A%2F%2Fwww.google.com%2Fmapfiles%2Farrow.png%7C41.39479%2C2.148768&visible=41.320004%2C2.069526%7C41.469576%2C2.22801&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&signature=WkICJTRmmI1EgDK2VJI4l9lt3qA=" title="" />
As a result, you have an image with specified area. I think you can even go further if you create a transparent png file for marker icon.
Hope it helps!
First, I have been reviewing some of the different Google Maps API docs, but I've never done much coding with it. I'm trying to build a simple game for kids in which, if the user clicks on a map within a certain distance of a key map point (could be within 1 mile, 100 yards, 5 miles...depending on situation), then the map point becomes visible and a custom message is displayed with it.
Which google maps api calls would enable this to work? How would I embed a hidden point on the map? With the map being rendered on the client, for security, if I could detect the point clicked and send that point via ajax to the server, then the server could send back whether there is a hidden point at that location, that seems like it could work. Or maybe there's a better way.
Can someone point me in the right direction, as to which API calls, and maybe code samples if possible? To summarize, I'm looking for the following functionality:
Track the lat/long coords of any user-clicked point on a google map. Have that click send the coords to my javascript function.
Have hidden points on the map that the user can't see, but either Maps (or at least just my server via ajax) can be aware of.
Ability to display a custom message right next to the clicked spot or hidden point, when needed.
Thanks!
When I understand correctly what you are trying to achieve it's much easier.
Draw a circle and hide the circle by setting the strokeWeight and fillOpacity to 0 . As radius use the allowed distance, as center the LatLng of the point
Although the circle now is not visible, the API will still respond to click-events on the circle, you only have to set a click-listener for the circle and create e.g. a marker at the center of the circle.
Note: a clickable circle will have a different cursor, you must set a unique cursor for the complete map, otherwise the users will be able to find the circle by hovering the map.
Demo: http://jsfiddle.net/doktormolle/0secbwuf/
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 have a database with various map locations (latitude, longitude).
I've been using a map api (e.g. google maps) to plot these locations.
I am now experimenting to see if I can totally remove dependency of map apis and simply replace the map control with an image (an .png image).
Question:
How can I translate the map locations to be displayed properly onto this map image?
More details:
Basically, the map will be a rectangular area (i.e. Div element), where the top-left corner of the rectangle is obviously (0, 0). So basically the map locations will be displayed with respect to this top-left corner.
First off, where are you getting your geocodes from? If they are from Bing or Google Maps then you can only use those coordinates with those map controls. Using this coordinates without the map controls is against the terms of use of these API's. Assuming that these coordinates come from somewhere else you can overlay them on an image by first knowing some information about the image. At a minimium you will need to know two coordinates on the image and their relative pixel locations. From that you can then determine the scale and top left coordinate of the image. With this you can then fairly accurately position coordinates on the image using a lot of math. You can find a lot of useful math for this here: http://msdn.microsoft.com/en-us/library/bb259689.aspx I've writing a few blog posts on this a while back which you can find here: http://rbrundritt.wordpress.com/2008/10/25/ve-imagery-service-and-custom-icons/
If these coordinates come from Bing Maps you can easily display them on a map image using the Bing Maps Imagery Service: http://msdn.microsoft.com/en-us/library/ff701724.aspx
EDIT: Turns out it was all because the coordinate translation functions in the javascript were written wrong. The author of the program has apparently fixed it.
I'm trying to use KML files to display placemarks on a custom Google Maps map. The map was generated by a Minecraft mapping program called Unmined.
My problem lies with the positioning of placemarks. They are placed on the map in a position that doesn't seem to correlate with either the pixel or latitude/longitude coordinates of the map itself.
Here is an image showing my problem.
I loaded a KML with five placemarks defined. One in the middle (0,0), one in the top-left corner (-170,80), one in the top-right corner (170,80), one in the bottom-left corner (-170,-80), and one in the bottom-right corner (170,-80). The set of markers seems to be duplicated horizontally but from my experience that's standard with Google Maps. As far as I know, the range of valid coordinates in a KML file are from -180 to 180 longitude and -90 to 90 latitude, which means that any valid placemark would have to fall somewhere inside that rectangle. Except that rectangle barely intersects the map at all.
If you need access to the code I'm using, everything can be found in the source of http://tonyfox.ws/dt/kantomap/ (URL may not exist forever)
So am I just doing something catastrophically wrong or what?
On a related note, how does Google Maps decide where to place the map in the coordinate system when the map isn't an actual Earth map (like this Minecraft world map)? My map seems to range from about 14.5 to 19.5 longitude, and 25.5 to 28 latitude. Why such weird numbers?