I want to have google map displaying whole planet(zoomed out maximally). Then, I would like to put overlay over map with button. When user click on button the overlay is removed and google map is automatically animating to the location i want.
So, I am not asking for complete solution, I just want you to tell me if it's possible to do that using google map js api, and if you can give me some direction, that would be awesome. I have searched a lot but found nothing on this subject.
Thanks.
I've noticed, that if difference between current zoom level and new zoom level more that 2, google maps won't make smooth zooming.
You can take a look at same question: How to zoom in smoothly on a marker in Google Maps?
map.setCenter(new google.maps.LatLng(theLatitude, theLongitude));
map.setZoom(yourZoomLevel);
See also: change location to preset coordinates and zoom with click of a button
Related
I have a map with multiple pins representing store locations. I zoom in until I see fewer locations and when I click on one of the red pins I get an instant zoom-out. No errors are popping up in the browser's console (Chrome and Firefox - latest versions).
Have a quick look at the screecast below:
https://monosnap.com/file/FEIB5YdvbSaQd5iiFZ363bfCXJryOt
Has anybody encountered this issue?
No I haven't encountered this because whenever I use google maps markers, I add an eventListener to them that controls the zoom. For instance:
marker.addEventListener("click", function(){
//zooms in on the location you clicked
map.setZoom(18);
map.setCenter(data.location);
});
I'm not positive but google maps api probably as a default value set whenever you click on a marker. If you edit your question with your code I might be able to answer a bit better.
i have used angular 2 google maps library in my porject to show google maps.
i have multiple markers in my map whose positions are changed frequently whenever a marker changes a position it jumps from one location to another location.i want to smooth movement of marker between two positions.
i have used https://github.com/terikon/marker-animate-unobtrusive this library in my js google map api and working fine but i tried to use the same library with this google map api but dont know how to do it.
i have included the cdn link in my html code and globally initialized the smoothing library but nothing is changed in my map.
is there any better approach to smooth markers movement?
I'm looking for a google maps like js library just for a image. The features i need are simple: Drag, Scroll, Zoom and most important are markers (eventually vectors). But instead of a map I want to have one picture in the background.
Description of what the library should do: Think as it would be a map-similar situation. In this web app I want to have a image (e.g. a treasure map, map of a building) like the tiles in google maps. The image should be moveable and zoomable. Overlayed over the pictures should be markers. Markers can be as simple as letters (a,b,c), symbols, pointers, div elements... The markers are fixed to the image, positioned relative to its size (zoom) and position like on google maps. drag n drop support is needed for user interaction. While editing the resource a user may drop a new marker onto the map or move/delete an existing one. If the user is not in the editing mode the markers may funktion as tooltips or links. Also if clicking an link outside the "image", the image should scroll to the right position, to show the searched result on the "image"-map. The App should also work on mobile devices.
Has anyone already seen such a tool or is interessted in helping to develop it?
Regards Manuel
How about openlayers?
It has a similar interface to google maps but allows you to customize the tiles/map and markers and doesn't rely on google's servers.
You can use custom layers with Google Maps - so you could replace the entire map with your own tiles (image). Simple example is here: http://code.google.com/apis/maps/documentation/javascript/examples/groundoverlay-simple.html or something more complicated http://mapwow.com/
I would like to put in my map on site something similar like on this site
When choose Personalize Your Search, I need to get gps of circle center and zoom and radius.
How could I achieve this?
All help is appreciated.
Why don't you add a draggable marker to you map?And the icon of the marker can be an icon with a circle around it.
If you use the Google Maps API V3, then you have the google.maps.Circle class. The circle gives you all the information you are requesting through it's methods:
getRadius()
getCenter()
It also has events, so that you can listen to mouse clicks on your map and move the circle to that click.
Thats how you can make a draggable element using Jquery, but not quite sure about getting a GPS location.
http://jqueryui.com/demos/draggable/
You can then find out the latitude, longitude when mouse moves over map. These lat and long info with help you to geocode the address and you can play around once you have current longitude and latitude information.
I have some thumbnails with gps info that I want to pass to a javascript google maps instance. I can get the points to draw on the map, center and zoom to fit, and I can replace the markers with the thumbnails.
This is close, but I'm looking for something that I can style (border, size, etc) and show more of a precise location, like a popup bubble like in google maps business search.. I've looked at the chart library, but that doesn't seem to be anything more than text and their icons.
I also like the way the panoramio (when you turn on photos in a google map) will scale the majority of images down and deal with zooming.. are there public libraries or functions we can use that do this stuff?
Thanks
Something like this? http://jsfiddle.net/Kai/Unh2M/embedded/result/ Its using an InfoWindow to display the picture when you click on the pin.
You can view the source on that at http://jsfiddle.net/Kai/Unh2M/ and check the reference on InfoWindows at http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows