updated maps.html to use google maps v3 and created custom route model using gmaps polyline tools to encode points

1 files changed, 97 insertions, 79 deletions

diff --git a/templates/includes/map_entry_list_template.html b/templates/includes/map_entry_list_template.html
index 0705602..206430a 100644
--- a/templates/includes/map_entry_list_template.html
+++ b/templates/includes/map_entry_list_template.html
@@ -1,89 +1,107 @@
 {% load typogrify %}
 {% load truncateletters  %}
 {% load slugify_under  %}
-<script type="text/javascript">
-  var map = null;
-  function JLngLat(a,b) {
-    return new GLatLng(b,a)
-    } 
-  function initialize() {
-    if (GBrowserIsCompatible()) {
-      var tinyIcon = new GIcon();
-      tinyIcon.image = "http://media.luxagraf.net/img/marker-entry.png";
-      tinyIcon.shadow = "http://media.luxagraf.net/img/shadow.png";
-      tinyIcon.iconSize = new GSize(12, 20);
-      tinyIcon.shadowSize = new GSize(22, 20);
-      tinyIcon.iconAnchor = new GPoint(6, 20);
-      tinyIcon.infoWindowAnchor = new GPoint(5, 5);
+function initialize() {
 
-      //var iconOptions = {};
-      //iconOptions.primaryColor = "#a53503";
-      //iconOptions.strokeColor = "#201a11";
-      //var icon = MapIconMaker.createLabeledMarkerIcon(iconOptions);
-      
-      var location = window.location.hash;
-      var pts = new Array();
-      {%for c in country_list%}pts[{{forloop.counter0}}] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];{% endfor %}
-      {%for c in region_list%}pts[pts.length] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];{% endfor %}
-      if (location.length>1) {
-          for (i=0;i<pts.length;i++) {
-              if (location == pts[i][0]) {
-                  point = new GLatLng(pts[i][1],pts[i][2]);
-                  zoom = pts[i][3];
-                  break;
-              } else {
-                  point = new GLatLng(19.311143,2.460938);
-                  zoom = 2;
-              }
-          }
-      } else {
-          point = new GLatLng(19.311143,2.460938);
-          zoom = 2;
-      }
-      
-      // create a new map.
-      map = new GMap2(document.getElementById("map-canvas"));
-      map.enableContinuousZoom()
-      map.setCenter(point, zoom, G_PHYSICAL_MAP);
-      
-      // basic control and overview (closed by default)
-      map.addControl(new GSmallZoomControl());
-      //var ov = new GOverviewMapControl();
-      //map.addControl(ov);
-      //ov.hide(true); 
-      
-      // Add a marker for each project
-      
-        {% for entry in object_list %}
-          point_{{entry.title|truncatewords:2|slugify_under}} = JLngLat{{entry.point.coords}};
-          markerOptions = { clickable:true, draggable:false, icon:tinyIcon};
-          marker_{{entry.title|truncatewords:2|slugify_under}} = new GMarker(point_{{entry.title|truncatewords:2|slugify_under}}, markerOptions);
-          map.addOverlay(marker_{{entry.title|truncatewords:2|slugify_under}});
-          marker_{{entry.title|truncatewords:2|slugify_under}}.info_window_content = '<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_thumbnail_url}}" height="100" alt="{{ entry.title }}"  style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it &raquo;<\/a><\/p><\/div>'
-          marker_{{entry|truncatewords:2|slugify_under}}.bindInfoWindowHtml(marker_{{entry|truncatewords:2|slugify_under}}.info_window_content, {maxWidth:400});
-          GEvent.addListener(marker_{{entry.title|truncatewords:2|slugify_under}}, "click", function() {
-            map.panTo(point_{{entry.title|truncatewords:2|slugify_under}}, 2);
-          });
+    //custom marker    
+    var image = new google.maps.MarkerImage('http://media.luxagraf.net/img/marker-entry.png',
+        new google.maps.Size(15, 26),
+        new google.maps.Point(0, 0),
+        new google.maps.Point(7, 26)
+    );
+    //custom marker shadow
+    var shadow = new google.maps.MarkerImage('http://media.luxagraf.net/img/shadow.png',
+        new google.maps.Size(37, 34),
+        new google.maps.Point(0,0),
+        new google.maps.Point(8, 34)
+    );
+    
+    
+    //check for a permalink
+    var location = window.location.hash;
+    //find a centerpoint
+    var pts = new Array();
+    {%for c in country_list%}pts[{{forloop.counter0}}] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];{% endfor %}
+    {%for c in region_list%}pts[pts.length] = ["#{{c.slug}}", {{c.lat}},{{c.lon}},{{c.zoom_level}}];{% endfor %}
+    if (location.length>1) {
+        for (i=0;i<pts.length;i++) {
+            if (location == pts[i][0]) {
+                centerCoord = new google.maps.LatLng(pts[i][1],pts[i][2]);
+                zoom = pts[i][3];
+                break;
+            } else {
+                centerCoord = new google.maps.LatLng(19.311143,2.460938);
+                zoom = 2;
+            }
+        }
+    } else {
+        centerCoord = new google.maps.LatLng(19.311143,2.460938);
+        zoom = 2;
+    }
+    //set up map options
+    var mapOptions = {
+        zoom: zoom,
+        center: centerCoord,
+        mapTypeId: google.maps.MapTypeId.TERRAIN,
+        disableDefaultUI: true,
+        navigationControl: true,
+        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
+    };
+    //create map
+    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
+   
+    
+    //loop through and set up markers/info windows
+
+    {% for entry in object_list %}
+    var marker_{{entry.title|truncatewords:2|slugify_under}} = new google.maps.Marker({
+        position: new google.maps.LatLng({{entry.latitude}}, {{entry.longitude}}),
+        map: map,
+        shadow: shadow,
+        icon: image
+    });      
+          
+    var c_{{entry.title|truncatewords:2|slugify_under}} = '<div class="infowin"><h4>{{entry.title}}<\/h4><span class="date blok">{{entry.pub_date|date:"F j, Y"}} ({% if entry.location.state.country.name == "United States" %}{{entry.location.name|smartypants|safe}}, {{entry.location.state.name}}){%else%}{{entry.location.name|smartypants|safe}}, {{entry.location.state.country.name}}){%endif%}<\/span><p><img src="{{entry.get_thumbnail_url}}" height="100" alt="{{ entry.title }}"  style="float: left; border: #000 10px solid; margin-right: 8px; margin-bottom: 4px; height: 100px;" \/>{{entry.dek|escapejs}} <a href="{{entry.get_absolute_url}}">Read it &raquo;<\/a><\/p><\/div>';
+    
+    google.maps.event.addListener(marker_{{entry.title|truncatewords:2|slugify_under}}, 'click', function() {
+    openWin(c_{{entry.title|truncatewords:2|slugify_under}},marker_{{entry.title|truncatewords:2|slugify_under}});
+    });
 
     {% endfor %}
+    // create an empty info window instance, set max width
+    var infowindow = new google.maps.InfoWindow({
+        content: ' ',
+        maxWidth: 400
+    }); 
+    //function to handle click event and display single info window
+    function openWin(content, marker) {
+        infowindow.close()
+        infowindow.setContent(content);
+        infowindow.open(map,marker);
     }
-  }
-  
-  // center on a country
+}
+// center on a country
   function focusCountry(latitude, longitude, zoom) {
     map.setZoom(zoom);
-    map.panTo(new GLatLng(latitude, longitude))
-  }
-  function addRoute(line,levels,color,lat,lon,zoom){
-    var encodedPolyline = new GPolyline.fromEncoded({
-    color: color,
-    weight: 5,
-    points: line,
-    levels: levels,
-    zoomFactor: 32,
-    numLevels: 4
+    map.panTo(new google.maps.LatLng(latitude, longitude));
+  };
+  
+{% for route in route_list %}
+var {{route.template_var_name}} = [
+{% for point in route.geometry.coords%}
+    new google.maps.LatLng({{point.1}}, {{point.0}}){% if forloop.last%}{%else%},{%endif%}
+{% endfor %}
+  ];
+{% endfor %}
+function showRoute(route, zoom, latitude, longitude) {
+    var routePath = new google.maps.Polyline({
+        path: eval(route),
+        strokeColor: "#FF0000",
+        strokeOpacity: 1.0,
+        strokeWeight: 2
     });
-    focusCountry(lat,lon,zoom);
-    map.addOverlay(encodedPolyline);
-  }
-  </script> 
\ No newline at end of file
+  map.setZoom(zoom);
+  map.panTo(new google.maps.LatLng(latitude, longitude));
+  routePath.setMap(map);  
+  return false;
+}