Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Map API v3 Color Customization

map sample image

I am trying achieve a map like the above image using google map. I made the map grayscale by giving saturation to -100 in StyledMapType object and drawn a radius around the marker using Circle object. Now the whole map is grayscle as i cannot set another saturation level inside the circle. Is there any way to achieve this ?

like image 230
Ajmal VH Avatar asked Mar 21 '13 12:03

Ajmal VH


People also ask

Can you change Google map colors?

You can change the color theme of Google Maps on your mobile device. Dark theme can make your screen easier to read and reduce battery usage.

Is Google Maps API customizable?

Easily create your styleThe new Google Maps APIs Styling Wizard helps you to create a map style in a few clicks. Use one of our pre-built styles or create your own style from scratch. Access advanced options for further control over every available aspect of your map style including visibility, fills & stroke weight.

How do I change the color of a marker in Google Maps API?

Add different color markerspng at the end of the URL to get a blue marker. To add a green marker simply change it to green-dot. png so that the URL will be http://maps.google.com/mapfiles/ms/icons/green-dot.png .

Can I color code Google Maps?

To color-code your map, just use the same method for the icons – click on the destination and when the box pops up, just click on whatever color you want to make it. You can make all restaurants blue, all shopping pink, all parks green, etc.


2 Answers

Another idea is to create second map, style it in another way via StyledMapType, make it absolutely positioned, and put it in front of first grayscaled map.

You can make it look round using -webkit-mask like described here

You should also synchronize events between maps, so that they would coincide, i.e. centered to the same position and always have same zoom level. You need also to create some kind of blocker to avoid recursive calls

var block = false;
google.maps.event.addListener (thismap, 'center_changed', function(event) {
    if (block) return;
    block = true;
    othermap.setCenter(thisMap.getCenter());
    block=false;
});

The same should be done for 'center_changed' (to control maps centering) and for 'zoom_changed' (control maps zoom), for both maps

Here I've set up an example

If you will need to create more than one map that way, you'll need to do more work to make them stick to necessary points

like image 174
paulitto Avatar answered Oct 10 '22 03:10

paulitto


As far as I am aware there is no way to accomplish this directly within the API. I have had to achieve a similar effect in the past and the way that I went about it was to create a 'donut' rather than a circle.

Effectively the idea is to create a large shape which excludes a circular area at it's center. This way you can set the opacity on the polygon fairly low in order to highlight the 'area of interest' in this case the central circle.

This is perhaps a good starting point: http://www.geocodezip.com/v3_polygon_example_donut.html

Though obviously in your case your going to want to alter the colors. Also be aware that the size is fixed so unless you limit the map bounds users will be able to zoom out far enough to see the edges (thus ruining the illusion), and polygons distort towards the poles (pesky spherical earth).

Hope this helps.

like image 35
ChrisSwires Avatar answered Oct 10 '22 02:10

ChrisSwires