From cbe0ab84411a7de2558e4a3616881e447c8bc111 Mon Sep 17 00:00:00 2001
From: Mikhail Ronchyk <misha170801planshet@gmail.com>
Date: Thu, 13 Jan 2022 01:59:10 +0300
Subject: [PATCH] map with marker

---
 .../events/templates/events/main_page.html    | 46 ++++++++++++++++---
 highneed/events/templates/events/style.css    |  3 ++
 highneed/static/css/style.css                 |  3 ++
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/highneed/events/templates/events/main_page.html b/highneed/events/templates/events/main_page.html
index c79743d..f60f776 100644
--- a/highneed/events/templates/events/main_page.html
+++ b/highneed/events/templates/events/main_page.html
@@ -6,6 +6,12 @@
     {% load static %}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css">
+    <style>
+        #map {
+            height: 450px;
+            width: 600px;
+        }
+    </style>
     <title>HighNeed.pl</title>
 </head>
 
@@ -88,18 +94,44 @@
     <section class="showcase maps">
         <div class="container grid">
             <div class="map-responsive">
-                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d155797.26090085393!2d16.761583054596013!3d52.40065525305756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470444d2ece10ab7%3A0xa4ea31980334bfd1!2zUG96bmHFhA!5e0!3m2!1spl!2spl!4v1640198590651!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
+                <div id="map" class="black"></div>
+                <script>
+                    function initMap() {
+  // The location of Uluru
+                    const uluru = { lat: 52.406376, lng: 16.925167 };
+  // The map, centered at Uluru
+                    const map = new google.maps.Map(document.getElementById("map"), {
+                    zoom: 12,
+                    center: uluru,
+                    });
+  // The marker, positioned at Uluru
+                    const marker = new google.maps.Marker({
+                    position: uluru,
+                    map: map,
+                    });
+                    var infoWindow = new google.maps.InfoWindow({
+                        content:'<h1 class="black">Wszystkie wydarzenia: {{ numofnews }}</h1>'
+                    });
+                    marker.addListener('click', function (){
+                        infoWindow.open(map, marker)
+                    });
+}
+
+
+                </script>
+
+                <script  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCEzDF5vX5HDuwBEoBm1UG-oRP8yCXN1oo&callback=initMap&libraries=&v=weekly"
+      async
+>
+                </script>
+
+                <!--iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d155797.26090085393!2d16.761583054596013!3d52.40065525305756!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470444d2ece10ab7%3A0xa4ea31980334bfd1!2zUG96bmHFhA!5e0!3m2!1spl!2spl!4v1640198590651!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe-->
             </div>
             <div class="showcase-text">
                 <h1>Interaktywna mapa</h1>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique porta risus, ac condimentum ex. Ut interdum dui ac dui pretium efficitur. Sed tempor, leo quis blandit sagittis, augue nulla malesuada urna, quis cursus ligula ante at urna. Etiam ligula est, bibendum at urna quis, pellentesque semper eros</p>
-                <script>
-                    if ({{ numofnews }}>10 )
-                    {
-                        window.alert({{ numofnews }})
 
-                    }
-                </script>
+
             </div>
         </div>
     </section>
diff --git a/highneed/events/templates/events/style.css b/highneed/events/templates/events/style.css
index 19371bc..72fc6e7 100644
--- a/highneed/events/templates/events/style.css
+++ b/highneed/events/templates/events/style.css
@@ -40,7 +40,10 @@ p {
 img {
     width: 100%;
 }
+.black {
 
+    background-color: black;
+}
 /* Navbar */
 .navbar {
     background-color: var(--background-green);
diff --git a/highneed/static/css/style.css b/highneed/static/css/style.css
index 8a1760b..eb3ccaf 100644
--- a/highneed/static/css/style.css
+++ b/highneed/static/css/style.css
@@ -40,7 +40,10 @@ p {
 img {
     width: 100%;
 }
+.black {
 
+    background-color: black;
+}
 /* Navbar */
 .navbar {
     background-color: var(--background-green);