map with all beacons

BeHub/Hub/static/js/map.js

+var Map = (function(){
+    this.init();
+    var myLatLng;
+    var markers;
+    var map;
+})
+
+Map.prototype.init = function(){
+    var self = this;
+    this.myLatLng = {lat: 50.049765, lng: 19.946762};
+    this.map = new google.maps.Map(document.getElementById('map'), {
+        zoom: 4,
+        center: self.myLatLng
+    });
+    this.markers = [];
+
+    this.getAllBeacons();
+}
+
+Map.prototype.addMarker = function(data){
+    var self = this;
+    var color = data.color || "FE7569";
+    var longitude = parseFloat(data.longitude);
+    var latitude = parseFloat(data.latitude);
+    var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + color,
+    new google.maps.Size(21, 34),
+    new google.maps.Point(0,0),
+    new google.maps.Point(10, 34));
+
+    var marker = new google.maps.Marker({
+        position: {lat: latitude, lng:longitude},
+        map: self.map,
+        icon: image,
+        title: data.title,
+        beacon: data.beacon
+      }).addListener('click', function() {
+        self.showInfo(this)
+      })
+    self.markers.push(marker)
+
+}
+
+Map.prototype.getAllBeacons = function(){
+    var self = this;
+    $.getJSON("/api/beacons", function(data){
+        for(var i=0; i<data.count; i++){
+            self.addMarker({
+                color: "FE7569",
+                longitude: data.results[i].longitude,
+                latitude: data.results[i].latitude,
+                title: [data.results[i].uuid, "(", data.results[i].name, ")"].join(""),
+                beacon: data.results[i]
+            });
+        }
+    })
+}
+
+Map.prototype.showInfo = function(marker){
+    alert('marker klikniety' + marker.beacon.uuid)
+}
\ No newline at end of file

BeHub/Hub/templates/user_panel/content/maps.html

-{% extends 'user_panel/default/base.html' %}
+<div id="map" style="height: 100%;">
 
-{% block content %}
-
-
-<div class="container">
-<div class="row">
- <div class="col-md-6">
-    <h2>Mapa</h2>
-
-
-  </div>
-</div>
 </div>
 
-
-{% endblock content %}
+<script>
+    var map;
\ No newline at end of file
+    $(document).ready(function(){
+        map = new Map();
+    });
+</script>
+<script async defer
+        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAaYyVEcLFqwKP_VnzfRSIMkWWWrLtMiGQ&signed_in=true&callback=initMap"></script>
\ No newline at end of file

BeHub/Hub/templates/user_panel/default/base.html

@@ -13,6 +13,11 @@
         <link rel="stylesheet" type="text/css" href="{% static 'css/left_bar.css' %}" />
         <link rel="stylesheet" type="text/css" href="{% static 'css/font-awesome.min.css' %}" />
 
+        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+        <!-- Include all compiled plugins (below), or include individual files as needed -->
+        <script src="{% static 'js/bootstrap.min.js' %}"></script>
+
         <title>Activy</title>
     </head>
 
@@ -27,10 +32,6 @@
         </div>
         {% include 'user_panel/default/footer.html' %}
 
-        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-    <!-- Include all compiled plugins (below), or include individual files as needed -->
-    <script src="{% static 'js/bootstrap.min.js' %}"></script>
     <script src="{% static 'js/hobby_detail.js' %}"></script>
     <script src="{% static 'js/map.js' %}"></script>
         <