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?
Related
I'm developing a small app using Google Maps javascript API v3 where I need to display 2 markers and update their positions using ajax. I found no problem in doing it using Google Maps Markers, but I need a more customized marker so I'm using Google Maps custom overlays and I can't find the way to make the movements smooth.
This is the design of the markers (that also uses css animations, so I need custom html):
Markers design
The problem I have is that I can't find a way to actually move the custom overlay on the map. What I'm doing now is removing the overlay and creating a new one every time I have to move it, what makes a little blink and don't allow me to make a smooth transition from one position to the other.
So here are my questions:
1- Is using custom overlays the best way to build the markers according to the design? Is there any way to make Google Maps Markers look like the design?
2- If using custom overlays (https://developers.google.com/maps/documentation/javascript/customoverlays) is the best option, is there another way for moving them that is not removing and creating a new one?
Thanks in advance!
After struggling with this some time (it really took me several hours) I have manage to do it getting inspired by this fiddle:
https://jsfiddle.net/doktormolle/QRuW8/
The functionality is not the same, but I could get some ideas.
Since there is not a lot of documentation I have created my own fiddle with a working (and simplified) example, just in case is useful for anyone:
https://jsfiddle.net/javigbas/3zx5xa2u/
:)
I have a small issue in the application I am building currently, and I can't figure out what's the problem.
I am using leaflet for displaying the map, with a Google Maps layer as a map.
My problem is that when I am zooming in or out of the map, the actual maps move directly but it takes almost a second before the markers layer gets updated too.
You can reproduce my problem easily on this test server, by choosing on of the points of interest, and zooming in or out when the points are displayed.
I haven't found any reference of this problem on the internet so far. Do you have any idea where this could come from ?
Thanks!
This is using a Google Maps layer, which means it wraps the Google Maps API. Since the Google Maps API zooms at a different speed than Leaflet, you see this effect.
There's no quick fix here: it's just not a very good idea to use the Google Maps API within Leaflet, technically or legally. Either use Leaflet with tiles that can be used directly with it - OSM, MapQuest, Stamen, Mapbox - or use the Google Maps API.
I have made a custom map using the Google map API v.3. I am trying to reduce the blank squares that you see when panning or zooming by caching the images.
I am currently looping through all the images in JavaScript and loading them into image object before I load the map, but this hasn't really improved it at all. It seems when ever the map loads it still makes its own calls for those images and it is only after visiting that part of the map does the map run smoothly without any blank squares.
Does anyone know how to improve the performance of the image loading for Google maps?
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 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