AJAX загрузка данных о точке

ground/controllers/JsonController.php

@@ -14,13 +14,18 @@ class JsonController extends Controller
         $categories = new Category();
         $categories = $categories->getAll();
 
-        foreach ($points as &$point) {
+		$result = array();
-            $point['categoryIcon'] = $categories[$point['categoryId']]['icon'];
+
-            $point['categoryName'] = $categories[$point['categoryId']]['name'];
+        foreach ($points as $point) {
+			$result[$point['id']]['id'] = $point['id'];
+			$result[$point['id']]['name'] = $point['name'];
+			$result[$point['id']]['lat'] = $point['lat'];
+			$result[$point['id']]['lng'] = $point['lng'];
+            $result[$point['id']]['categoryIcon'] = $categories[$point['categoryId']]['icon'];
         }
 
         self::renderPartial('json.php', array(
-			'data' => $points,
+			'data' => $result,
 		));
     }
 

public/css/style.css

@@ -9,7 +9,7 @@
 html {height: 100%;}
 body {margin: 0; padding: 0; height: 100%;}
 div#map {width: 100%; position: absolute; top: 0; bottom: 50px;}
-div.infoCard {width: 400px;}
+div.infoCard h3 {text-align: center; margin-top: 0;}
 div.infoCard img {width: 200px; float: left; margin: 0 10px 5px 0;}
 div.header {display: block; position: absolute; top: 0; left: 110px; border-radius: 0 0 5px 5px; z-index: 1000; background-color: #FFF; padding: 5px 10px;}
 div.header h1 {display: inline; color: #333;}

public/js/main.js

@@ -5,6 +5,7 @@
 ymaps.ready(init);
 var myMap;
 var categories;
+var points = Array();
 
 function init() {
     myMap = new ymaps.Map("map", {
@@ -43,18 +44,22 @@ function getPoints()
         url: "/json/points/",
         success: function(data){
             for(var k in data) {
-                myPlacemark = new ymaps.Placemark(
+                id = data[k]['id'];
+                points[id] = new ymaps.Placemark(
                     [data[k]['lat'], data[k]['lng']], {
                         hintContent: data[k]['name'],
-                        balloonContent:
+                        id: id
-                        '<div class="infoCard">' +
+                    },{
-                        '<img src="'+data[k]['img']+'" />' +
+                        iconImageHref: data[k]['categoryIcon'],
-                        '<h3>'+data[k]['name']+'</h3>' +
+                        iconImageSize: [32, 37],
-                        data[k]['description'] +
+                        openEmptyBalloon: true,
-                        ' <a href="'+data[k]['source']+'" target="blank">Подробнее...</a></div>'
+                        balloonCloseButton: false
-                    },{iconImageHref: data[k]['categoryIcon'], iconImageSize: [32, 37]});
+                    });
 
-                myMap.geoObjects.add(myPlacemark);
+                points[id].events.add('click', function (e) {
+                    showInfo(e.get('target').properties.get('id'));
+                });
+                myMap.geoObjects.add(points[id]);
             }
         }
     });
@@ -62,6 +67,26 @@ function getPoints()
     return true;
 }
 
+function showInfo(id)
+{
+    if (!(id in points) || points[id].properties.get('balloonContent') == undefined)
+    {
+        points[id].properties.set('balloonContent', 'Загрузка...');
+        $.ajax({
+            url: "/json/point/id/" + id,
+            success: function(data) {
+                description = '<div class="infoCard">' +
+                        '<h3>' + data.name + '</h3>' +
+                        '<img src="' + data.img + '" />' +
+                        data.description +
+                        ' <a href="' + data.source + '" target="blank">Подробнее...</a></div>'
+                points[id].properties.set('balloonContent', description);
+            }
+        });
+    }
+    return true;
+}
+
 function initCategories()
 {
     $.ajax({