Adding Day #20

NaeuCode · NaeuCode · commit 3751258ab735 · 2023-10-05T12:07:01.000+03:30
diff --git a/Day #20 - Google Maps API/README.md b/Day #20 - Google Maps API/README.md
@@ -0,0 +1,9 @@
+# Day #20
+
+### Google Maps
+In this tutorial ([Open in Youtube](https://youtu.be/KFAlHY6AQCI)),  I am gonna showing to you how to use google maps api in javascript. we create a project that you can work with google map in javascript❗️Also this project is full responsive!
+
+# Screenshot
+Here we have project screenshot :
+
+![screenshot](ScreenShot-20.png)
diff --git a/Day #20 - Google Maps API/ScreenShot-20.png b/Day #20 - Google Maps API/ScreenShot-20.png
diff --git a/Day #20 - Google Maps API/index.html b/Day #20 - Google Maps API/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Day #20 - Google Map API | NaeuCode</title>
+</head>
+<body>
+    
+    <div class="container">
+        <div id="map"></div>
+    </div>
+
+
+    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Day #20 - Google Maps API/script.js b/Day #20 - Google Maps API/script.js
@@ -0,0 +1,30 @@
+
+function initialize() {
+  let mapOptions = {
+    zoom: 10,
+    center: new google.maps.LatLng(37.25, 55.16),
+    mapTypeId: google.maps.MapTypeId.ROADMAP,
+    minZoom: 2,
+  };
+
+  let map = new google.maps.Map(document.getElementById("map"), mapOptions);
+
+  let infoWindow = new google.maps.InfoWindow();
+  
+  let marker = new google.maps.Marker({
+    position: new google.maps.LatLng(37.25, 55.16),
+    map: map,
+    title: "Iran, Gonbad-e Kavus"
+  });
+
+  marker.addlistener("click", () => {
+    infoWindow.setContent(marker.title);
+    infoWindow.open(map, marker);
+  });
+
+  google.maps.event.addDomListener(window, "resize", () => {
+    map.setCenter(mapOptions.center);
+  });
+}
+
+google.maps.event.addDomListener(window, "load", initialize);
diff --git a/Day #20 - Google Maps API/style.css b/Day #20 - Google Maps API/style.css
@@ -0,0 +1,9 @@
+body{
+    margin: 0;
+    padding: 0;
+}
+
+#map {
+    width: 100%;
+    height: 100vh;
+}
diff --git a/README.md b/README.md
@@ -30,3 +30,4 @@ Here we have list of projects:
 17. Breakout Game App
 18. Crypto Price App
 19. Shadow Generator
+20. Google Maps API
