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.
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.
I am creating an app which mainly features a map and some special features. Because the map is the place where 90% of the interaction happens, I consider it as an important part of the app. Having watched Dave Crawford's design consultations, an essential part of making an app look good is to create a brand. Because there is pretty much nothing except the app bar, the map and some markers, I'm considering coloring the map itself.
But I've got two questions:
Will this have an positive affect on both the branding and the usability? I don't want the user to get a headache just because I prefer my color scheme, but I want my app to be unique
Will this be possible when using the phone built-in map control? This seems especially important to me as Windows Phone is capable of saving maps ofline and I want to have access to these maps
I would argue that should not adjust something like a map, for branding experiences.
Users have strict mental models of how maps should look and function. Deviating from the norm, only for brand, is not wise.
You might consider other ways to introduce your brand and value.
Perhaps through unique pins and markers, splash screens, additive menus, etc.
I'm assuming you mean the styling of the map itself (roads, parks, etc.)?
You would need to use your own custom map tiles, perhaps produced using a service such as Mapbox.
I use my own custom map tiles in NZ Topo Map, but I had to fallback to the older WP7 map control (Microsoft.Phone.Controls.Maps.Map) in order to use them. I couldn't find a way to base the map purely on my own tiles using the WP8 map control unfortunately (this answer has more detail).
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.
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
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.