Google Maps - Facebook style

Google Maps - Facebook style

by Emmanuel Garcia

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map_canvas"></div>

CSS

body, html {
    width: 100%;
    height: 100%;
}
#map_canvas {
  width: 100%;
  height: 100%;
}

JavaScript

var stylesArray = [
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      { "color": "#b1bdd6" }
    ]
  },{
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#ffffff" },
      { "weight": 0.2 }
    ]
  },{
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#a0aecc" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "color": "#e8e5e5" }
    ]
  },{
    "featureType": "administrative.province",
    "stylers": [
      { "weight": 0.5 },
      { "color": "#d1d0cf" }
    ]
  },{
    "featureType": "poi.park",
    "stylers": [
      { "visibility": "on" },
      { "color": "#c5dea2" }
    ]
  },{
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      { "color": "#f3f3f2" }
    ]
  },{
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      { "visibility": "on" },
      { "invert_lightness": true },
      { "color": "#787878" }
    ]
  },{
    "featureType": "administrative.country",
    "stylers": [
      { "color": "#868686" },
      { "weight": 0.7 }
    ]
  },{
    "featureType": "administrative.country",
    "elementType": "labels.text.fill",
    "stylers": [
      { "color": "#999999" }
    ]
  },{
    "featureType": "poi.park",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#ffffff" }
    ]
  },{
    "featureType": "administrative.country",
    "elementType": "labels.text.stroke",
    "stylers": [
      { "color": "#ffffff" },
      { "weight": 2.8 }
    ]
  }
];
var map;
var mapOptions = {
  zoom: 7,
  center: new google.maps.LatLng(52, 0),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: stylesArray
};
map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);