map with marker

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>

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);

highneed/static/css/style.css

@@ -40,7 +40,10 @@ p {
 img {
     width: 100%;
 }
+.black {
 
+    background-color: black;
+}
 /* Navbar */
 .navbar {
     background-color: var(--background-green);