Trying to make infoWindows a little less uglier I found out that the infoWindows on Google Maps and the infoWindows created through API are different.
Illustration
Do I have to style infoWindows manually or it's possible to get those stylish ones through API?
The API does not provide for easy, direct, robust styling of the InfoWindow objects (or, if it does, it is not documented) except for a few small things. You can see what options are available at http://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindowOptions. As you can see, right now, there's nothing for things like rounded corners vs. not-rounded corners, etc. (Side question: What do you call corners that aren't rounded?)
So, sorry to say, it would seem like you are stuck messing with stylesheets, at least at the current time. Or you could use http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobubble/src/infobubble.js as a starting point but that may be a lot of code for a small effect.
Related
I have been trying for some weeks to come up with a price map. My inspiration is the heatmap found on the website of Housing.com . The link to the map is:
https://housing.com/dsl/heatmaps/mumbai/buy
I have tried:
Google maps Javascript API 3
heatmap,js library
and many other websites.
The resulting map that I am getting is visually less appealing.
Have they defined boundaries for very small regions and then introduced the gradient(which, again I am unaware how to implement.)
Any thoughts on how it might have been implemented are welcomed.
They don't use Google Maps Heatmaps Layer in the application, or any other library for creating heatmaps. You can see that between the requests the webpage makes are images like this, this and also more for bigger zoom levels. They just render these images over custom styled google maps as tiles.
More on how to render custom tiles over google maps, check this part of docs. For more information how to style the map below the heatmap to look like in the example, check this parts of docs.
Creating tiles images to render over your google maps can be troublesome, there are some tools, like this one which should be able to help you, but is paid. I don't know of any free solutions, you can create it manually although it might take some time.
Hope this helps you to better understand the implementation techniques behind the referenced map.
on this page https://developers.google.com/maps/articles/toomanymarkers
it says how this is the easiest clustering posible, but I can't find any client side solution for this. Does anyone know for free open source, client side solution of grid based clustering for google maps markers ? i don't want MarkerClusterer.
I didn't find it, so i went and start coding my own solution. The first obvious request is that it has to be fast for up to at least 1000 markers loaded on map. Every zoom in out, move and soo on, will repeat procedure/function of clustering. Grid blocks are customizable, default value is 50*50 pixels.
Image below is showing what should the result look like.
I'm having problem with algoritem, now all I can think of to achive this is to itterate through all markers for each grid and ask if it is inside bounderies and then increase array of grid ++. This obviusly can't be done that way. There should be some hash or something that just one itteration through all markers would be needed and I would know in which grid specific marker belongs to.
I hope someone will give me a hint for algoritem I'm after. Thank you !
Seems like geohash is the answer to your problem, you even allude to that solution in your question. It's explained well here:
http://blog.trifork.com/2013/08/01/server-side-clustering-of-geo-points-on-a-map-using-elasticsearch/
I am actually exploring developing a similar clustering algo for Google Maps API v3. I'll post more if I actually get anywhere with it.
You can use a geohash or a space filling curve to reduce the dimension and reorder and hash a marker. On the server side you can use a point and a spatial index data stucture but you can also compute the geohash manually. Look for xkcd internet map comic and the hilbert curve to see how it works.
How do I implement the red dots as seen on the Google Map linked below:
Red Dots
UPDATE
I'm using Google Maps version 3 (not 2)
UPDATE 2
I found the following Presentation by Google talking about what I want to do.
docs.google.com/present/view?pli=1&id=dggjrx3s_153hdf2s6cm
It's slide 27, called "Tiny Clickable Markers". However, they do not talk about how I implement these kind of markers nor does it answer my questions above.
Unfortunately, those dots are -- as far as I know -- a special feature of Google's commercial Maps application (distinct from the maps api, v2 or v3), meaning it's unavailable for api use.
As for how it actually works, it appears they are not being added to the map in the standard fashion of the larger, tear-drop markers, each of which is an individual div being absolutely positioned on the map. The tiny red dots are actually a layer of image tiles being baked on Google's servers, and then these tiles are added to the map as images (I'm not sure how they're made clickable). Anyway, all this makes sense, because adding that many individual divs to the DOM burns up a lot of CPU. (Disclaimer: this is just my guess as to how it works).
All of which is to say: it's probably not a great idea to put that many markers on a map, unless you implement something like Google's tile solution.
UPDATE
It's been awhile, but it turns out you can do this, you just have to use Google's Fusion Tables service.
some documentation here
How much control do I have regarding the styling of a google map?
Can I make it more closely resemble a site's colour scheme or are we stuck with pastels?
Controls
There is a decent description of the process to override the set of builtin Controls. So you have total control over the UI elements overlaying the map.
Map Tiles
I don't agree with the previous answers that you are out of luck if you want to change the images in the map itself.
The range of map types available give you a few options outside the pastel default map:
G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP, G_MAPMAKER_NORMAL_MAP,
G_MAPMAKER_HYBRID_MAP, G_SATELLITE_3D_MAP, G_DEFAULT_MAP_TYPES, G_MAPMAKER_MAP_TYPES
Obviously, this only works if you are willing to create the tiles, but Custom Tilesets are quite well supported by the Google Maps API and there a few good examples out there:
World of Warcraft tileset
Batmud tileset
Tower of the Hand tilset
Update
Google recently announced support for Styled Maps in the Google Maps API. You can extensively customize the color scheme used by Google Maps. So you can customize the look of your mashup, without resorting to custom tilesets.
You can probably change around all the controls, perhaps by making your own or subclassing the google default versions. You won't be able to change the colors on the map itself without generating all new map images, at which point you are probably better off using something other than google. If thats what you want, you should consider OpenStreetMaps.
I've looked into this before. From what I've found is that the styles of layers/overlays on the map are pretty much determined by Google (minus a few size option for some overlays). What I have found is that you'll either need to subclass the existing overlays or create entirely new overlays that mimic the existing functionality, which in some cases can be painful given their complexity (such as street view and others).
Last I checked, you were stuck with the colors you were given (this was a year ago). You can check http://code.google.com/apis/maps/ for more info.
I have large images that I would like to have dragging and zooming controls like Google Maps. I started looking into Google Maps API and some other related websites, but I could not find something simple and easy.
MapKi tutorial suggests me to automatically cut tiles and add it as a custom map. This makes sense, but I have so many images in the file server that I don't have time to go through all of them and cut the tiles and figure out zoom levels for each. One good solution would be writing a script that can do this automatically, but that would take a lot of effort and time that has made to look for another solution if there is any.
Hence, is there a way to have similar functionalities as Google Maps controls for images without creating new images or tiles out of the original image. It would be great if you can either post some code or link to the tutorial/documentation. Or, if you know how to do this with Google API without making those tiles, please direct me to the right path. I'm a total newbie with Google Maps API.
I have found the DragZoom for Google Maps, but I don't think that's what I'm looking for.
You're looking for something like Djatoka
You should take a look at the IIIF protocol used by libraries and museums for zooming extremely large images (tens of thousands of pixels on a side +), preparing collections of images on canvases, presenting annotations on those images, etc.
http://iiif.io
…and just for the record here's an open source tiling server with a frontend viewer:
http://iipimage.sourceforge.net/
Check out https://github.com/Murtnowski/GMap-JSlicer
slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();
It's super simple, no need for tile pre-cutting. Just point at a single image and go.