Changeset 452

Timestamp:

05/25/10 16:57:09 (21 months ago)

Author:

aarkerio

Message:

Update Google markers

Location:

trunk

Files:

• controllers/markers_controller.php (modified) (1 diff)
• models/marker.php (modified) (1 diff)
• views/layouts/gmap.ctp (modified) (1 diff)
• views/markers/admin_index.ctp (modified) (1 diff)
• views/markers/display.ctp (modified) (1 diff)

trunk/controllers/markers_controller.php

@@ -30 +30 @@
   $this->layout = 'admin';
   $this->Marker->recursive = 0;
+  $this->paginate['conditions'] = array('user_id'=>$this->Auth->user('id'));
   $this->set('markers', $this->paginate());
  }

trunk/models/marker.php

@@ -11 +11 @@
 
 class Marker extends AppModel {
-  public $name = 'Marker';
+
+ public $name = 'Marker';
+
+/**
+ *  CakePHP belongsTo relation
+ *  @access public
+ *  @var array
+ */   
+  public $belongsTo  = array(
+             'User' => array(
+                         'className'  => 'User',
+                         'foreignkey' => 'user_id',
+                         'fields'     => 'username'
+                         ));
+
   public $displayField = 'name';
+
+
   public $validate = array(
                 'name' => array('rule'       => array('minLength', 4),

trunk/views/layouts/gmap.ctp

@@ -6 +6 @@
 <title>Google Maps</title>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
-<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
+<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
- <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjPKkDYTVDZGDWlW2yrngQRS683khtCNerCX0A8OGSN-Hv50GHRRSNxYQrB8Gx4ciUuqyy6DNkow08g"
-            type="text/javascript"></script>
+ <!-- script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjPKkDYTVDZGDWlW2yrngQRS683khtCNerCX0A8OGSN-Hv50GHRRSNxYQrB8Gx4ciUuqyy6DNkow08g"
+            type="text/javascript"></script -->
 
 <script type="text/javascript">
- //<![CDATA[
-
-  function initialize() {
-     var latlng = new google.maps.LatLng(19.43430, -99.13264);
-     var myOptions = {
-     zoom: 8,
-     center: latlng,
-     mapTypeId: google.maps.MapTypeId.ROADMAP
-     };
-     var map = new google.maps.Map(document.getElementById("map"), myOptions);
+//<![CDATA[
+google.load("maps", "3",  {other_params:"sensor=false"});
+google.load("jquery", "1.3.2");
+ 
+function initialize() {
+    var myLatlng = new google.maps.LatLng(19.43576, -99.14466);
+    var myOptions = {
+    zoom: 10,
+    center: myLatlng,
+    mapTypeId: google.maps.MapTypeId.ROADMAP
+    }
+    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
+ 
+    // For more information on doing XMLHR with jQuery, see these resources:
+    // http://net.tutsplus.com/tutorials/javascript-ajax/use-jquery-to-retrieve-data-from-an-xml-file/
+    // http://marcgrabanski.com/article/jquery-makes-parsing-xml-easy
+    jQuery.get("/markers/display", {}, function(data) {
+            jQuery(data).find("marker").each(function() {
+                    var marker  = jQuery(this);
+                    var latlng  = new google.maps.LatLng(parseFloat(marker.attr("lat")),
+                                                        parseFloat(marker.attr("lng")));
+                    var name    = marker.attr('name');
+                    var address = marker.attr('address');
+                    var user    = marker.attr('user');
+                    //alert(name);
+                    var marker  = new google.maps.Marker({position: latlng, map: map});
+                    
+                    // create the tooltip and its text
+                    var infoWindow = new google.maps.InfoWindow();
+                    var html='<b>'+name+'</b><br />'+address+' <br />Recommended by:<b>'+ user+'</b>';
+                    // add a listener to open the tooltip when a user clicks on one of the markers
+                    google.maps.event.addListener(marker, 'click', function() {
+                            infoWindow.setContent(html);
+                            infoWindow.open(map, marker);
+                        });
+                });
+        });
  }
 
-var iconBlue = new GIcon(); 
-iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
-iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
-iconBlue.iconSize = new GSize(12, 20);
-iconBlue.shadowSize = new GSize(22, 20);
-iconBlue.iconAnchor = new GPoint(6, 20);
-iconBlue.infoWindowAnchor = new GPoint(5, 1);
+google.setOnLoadCallback(initialize);
 
-var iconRed = new GIcon(); 
-iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
-iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
-iconRed.iconSize = new GSize(12, 20);
-iconRed.shadowSize = new GSize(22, 20);
-iconRed.iconAnchor = new GPoint(6, 20);
-iconRed.infoWindowAnchor = new GPoint(5, 1);
-
-var customIcons = [];
-customIcons["restaurant"] = iconBlue;
-customIcons["bar"] = iconRed;
-
-function load() {
-    if (GBrowserIsCompatible()) {
-        var map = new GMap2(document.getElementById("map"));
-        map.addControl(new GSmallMapControl());
-        map.addControl(new GMapTypeControl());
-        map.setCenter(new GLatLng(19.43430, -99.13264), 10);
-       
-        GDownloadUrl("/markers/display", function(data) {
-                var xml = GXml.parse(data);
-                var markers = xml.documentElement.getElementsByTagName("marker");
-                for (var i = 0; i < markers.length; i++) {
-                    var name = markers[i].getAttribute("name");
-                    var address = markers[i].getAttribute("address");
-                    var type = markers[i].getAttribute("type");
-                    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
-                                            parseFloat(markers[i].getAttribute("lng")));
-                    var marker = createMarker(point, name, address, type);
-                    map.addOverlay(marker);
-                }
-            });
-    }
-}
-
-function createMarker(point, name, address, type) {
-    var marker = new GMarker(point, customIcons[type]);
-    var html = "<b>" + name + "</b> <br/>" + address;
-    GEvent.addListener(marker, 'click', function() {
-            marker.openInfoWindowHtml(html);
-        });
-    return marker;
-}
-//]]>
 </script>
-</head>
-<body onload="initialize()" onunload="GUnload()">
-    <div>Mononeurona::My Places::Google maps API</div>
-    <div id="map" style="width: 900px; height: 800px;margin:auto;"></div>
+<body><h3>MonoNeurona::Google Maps</h3>
+    <div id="map_canvas" style="border: 1px solid black; margin:auto;width:900px; height:800px"></div> 
  </body>
 </html>

trunk/views/markers/admin_index.ctp

@@ -3 +3 @@
 <?php 
  echo $this->Html->link(sprintf(__('New %s', true), __('Marker', true)), array('action' => 'edit')); 
- echo $this->Html->link('View all markers', array('action' => 'view'));
+echo $this->Html->link('View all markers', array('controller'=>'','action' => 'view'));
 ?>
 </div>

trunk/views/markers/display.ctp

@@ -15 +15 @@
     $newnode->setAttribute("lat", $row['Marker']['lat']);
     $newnode->setAttribute("lng", $row['Marker']['lng']);
+    $newnode->setAttribute("user", $row['User']['username']);
     $newnode->setAttribute("type", $row['Marker']['type']);
 endforeach;