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?
Related
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 have a map created in My Maps, and I wand to embed it in a website, however I'd like to have InfoWindows on marker click instead of the default side panel, and change the description a bit.
From what I found, the only way to do so is to use a regular Google Maps API and add my data onto it with a KML layer. This is working, however, the icons (the pins) are highly pixelated and look terrible. When using the same map via embed (or simply opening it) they are OK.
Would really appreciate any help with the issue. Probably there is another way of adding a custom map to an API-powered map?
The answer I've come up with is: no way to achieve what I'm looking for.
When exporting KML layers, Google scales all icons to 32X32 px, and then scales them up (kml file contains scale 1.1 directive). Even if you change the scale, the files remain 32X32, so it does not help; you need to create another files, in other words: the kml exported from Google is not usable if you have custom png icons.
I ended up using regular markers instead of KML layer.
I wanted to know how Google Maps was working in the browser and I saw that :
The map is divided in div's of 256x256 px's.
When moving on the map it is requesting png/images. Very little additional data is received in a separate response for each image. (I didn't saw anything missing in the images)
It is adding canvas elements for drawing markers, circle, lines,...
I thought Google Maps was only receiving data, that was then drawed with canvas in the browser.
Is it correct Maps is about png/images?
This would imply image they make available are rendered/updated upstream with the data they collect?
I have a site where I'm using Maps Javascript API to print several polygons to the screen and manage hover/click events, but I don't need to see the underlying map. At the moment I've just styled all of the map elements to white, and it works, but I'd rather eliminate the requests, since it's currently downloading ~40 seperate blank white squares.
Happy to try a different plugin / API if it works, but I had a look for alternate applications without much luck.
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/