Contents

/
  Add the code below to the bottom of your page, just before the closing </body> tag.
  Edit myLatlng and the other variables.
  
  Find syntax for Features that can be styled here:
  
  https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType
  
  Or use a service such as:
  
  http://software.stadtwerk.org/google_maps_colorizr/#
  http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
  https://developers.google.com/maps/documentation/javascript/tutorial
/
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script>
  var bittersMap = (function () {
  var myLatlng = new google.maps.LatLng(59.342457, 18.057340),
  mapCenter = new google.maps.LatLng(59.340458, 18.057340),
  mapCanvas = document.getElementById('map_canvas'),
  mapOptions = {
  center: mapCenter,
  zoom: 13,
  scrollwheel: false,
  draggable: true,
  disableDefaultUI: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  },
  map = new google.maps.Map(mapCanvas, mapOptions),
  contentString =
  '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">thoughtbot</h1>'+
  '<div id="bodyContent"'+
  '<p>Sveavägen 98</p>'+
  '</div>'+
  '</div>',
  infowindow = new google.maps.InfoWindow({
  content: contentString,
  maxWidth: 300
  }),
  marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'thoughtbot (Sweden)'
  });
  
  return {
  init: function () {
  map.set('styles', [{
  featureType: 'landscape',
  elementType: 'geometry',
  stylers: [
  { hue: '#ffff00' },
  { saturation: 30 },
  { lightness: 10}
  ]}
  ]);
  
  google.maps.event.addListener(marker, 'click', function () {
  infowindow.open(map,marker);
  });
  }
  };
  }());
  
  bittersMap.init();
  </script>
#map_canvas

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
breezeblocks-0.0.2	source/_maps.html.haml
breezeblocks-0.0.1	source/_maps.html.haml