New feature: Map Types

hpneo · Oct 12, 2012 · 8a96d0f · 8a96d0f
1 parent 1b7ef67
commit 8a96d0f
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,10 @@ Visit the examples in [hpneo.github.com/gmaps](http://hpneo.github.com/gmaps/)
 Changelog
 ---------
 
+0.2.22
+-----------------------
+* New feature: **Map Types**
+
 0.2.21
 -----------------------
 * Support to add google.maps.Marker objects in addMarker and addMarkers methods.

diff --git a/examples/map_types.html b/examples/map_types.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>GMaps.js &mdash; Map Types</title>
+  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
+  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
+  <script type="text/javascript" src="../gmaps.js"></script>
+  <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />
+  <link rel="stylesheet" type="text/css" href="examples.css" />
+  <script type="text/javascript">
+    var map;
+    $(document).ready(function(){
+      map = new GMaps({
+        el: '#map',
+        lat: -12.043333,
+        lng: -77.028333,
+        mapTypeControlOptions: {
+          mapTypeIds : ["hybrid", "roadmap", "satellite", "terrain", "osm", "cloudmade"]
+        }
+      });
+      map.addMapType("osm", {
+        getTileUrl: function(coord, zoom) {
+          return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
+        },
+        tileSize: new google.maps.Size(256, 256),
+        name: "OpenStreetMap",
+        maxZoom: 18
+      });
+      map.addMapType("cloudmade", {
+        getTileUrl: function(coord, zoom) {
+          return "http://b.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
+        },
+        tileSize: new google.maps.Size(256, 256),
+        name: "CloudMade",
+        maxZoom: 18
+      });
+      map.setMapTypeId("osm");
+    });
+  </script>
+</head>
+<body>
+  <h1>GMaps.js &mdash; Map Types</h1>
+  <div class="row">
+    <div class="span11">
+      <div id="map"></div>
+    </div>
+    <div class="span6">
+      <p>You can define many map types from external map services, like OpenStreetMap:</p>
+      <pre>map.addMapType("osm", {
+  getTileUrl: function(coord, zoom) {
+    return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
+  },
+  tileSize: new google.maps.Size(256, 256),
+  name: "OpenStreetMap",
+  maxZoom: 18
+});</pre>
+      <p>You must define a function called <code>getTileUrl</code>, which returns a tile URL according the coordenates in the map.</p>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/examples/marker_clusterer.html b/examples/marker_clusterer.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>GMaps.js &mdash; Basic</title>
+  <title>GMaps.js &mdash; Marker Clusterer</title>
   <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

diff --git a/gmaps.js b/gmaps.js
@@ -1,5 +1,5 @@
 /*!
- * GMaps.js v0.2.21
+ * GMaps.js v0.2.22
  * http://hpneo.github.com/gmaps/
  *
  * Copyright 2012, Gustavo Leon
@@ -1199,6 +1199,20 @@ if(window.google && window.google.maps){
 
         return GMaps.staticMapURL(static_map_options);
       };
+
+      this.addMapType = function(mapTypeId, options) {
+        if(options.hasOwnProperty("getTileUrl") && typeof(options["getTileUrl"]) == "function") {
+
+          options.tileSize = options.tileSize || new google.maps.Size(256, 256);
+
+          var mapType = new google.maps.ImageMapType(options);
+
+          this.map.mapTypes.set(mapTypeId, mapType);
+        }
+        else {
+          throw "'getTileUrl' function required";
+        }
+      };
 
     };