Pages

2014-06-16

Black & White Google Map

Google has just announced a new feature in its Maps API that lets developers control the underlying map imagery. Map Styling gives you control of colors and whether types of features are included in the map.

Previously this level of map styling was only available by paying for underlying map data, or using the Open Street Map project that CloudMade is based upon.

Now here you can find how to customize your google maps.



Getting Started

The Google Maps JavaScript API v3 does not require an API key to function correctly. However, i strongly encourage you to load the Maps API using an APIs Console key which allows you to monitor your application’s Maps API usage.

If you wanna add an API KEY to your code, you should take one here: http://code.google.com/apis/console

Adding Style and Marker to Your Google Map


<script type="text/javascript">
// <![CDATA[
//GOOGLE MAP OPTIONS
var map;
function initialize() {
  var mapOptions = {
    zoom: 10, //Zoom level.
    center: new google.maps.LatLng(41.095576, 28.887441), 
//To center the map, put your lat. and lng. here
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
//GOOGLE MAP STYLES
var styles = [
  {
    "stylers": [
      { "gamma": 0.88 },  //Gama value.
      { "hue": "#ff0022" }, //Hue value.
      { "saturation": -100 } //Saturation value.
    ]
  }
];
//APPLY MAP AND MARKER
  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
TestMarker();
map.setOptions({styles: styles});
}
//ADDING MARKER
function addMarker(location) {
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
    }
function TestMarker() {
           HomeSH = new google.maps.LatLng(41.005576, 28.870441); //For marker, put your lat. and lng. here
           addMarker(HomeSH);
    }
google.maps.event.addDomListener(window, 'load', initialize);
// ]]>
</script>


Yeap, thats all, your styled Google Map is ready. For other styling options for your map, you may visit Google Maps Developer Documentations

Hiç yorum yok:

Yorum Gönder