Build Google Maps API Location Finder App in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

index.html

 

 

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
<link rel="stylesheet" href="maps.css" />
</head>


<nav>
<h1>City Menu</h1>
<ul>
  <li id="find1"onclick="myFunction1()">New York</li>
  
<li id="find2"onclick="myFunction2()">Paris</li>
  
  <li id="find3"onclick="myFunction3()">Tokyo</li>
  
  
</ul>
</nav>

  <head>
    <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>

<script>
function myFunction1() {
    document.getElementById("find1").style.color = "red";
  var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 40.730610, lng:  -73.935242},
          zoom: 8
        });
}
  
function myFunction2() {
    document.getElementById("find2").style.color = "red";
  var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 48.864716, lng:  2.349014},
          zoom: 8
        });
}

  
function myFunction3() {
    document.getElementById("find3").style.color = "red";
  var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat:  35.652832, lng:  139.839478},
          zoom: 8
        });
}
 
</script>

 

 

 

style.css

 

 

*{box-sizing: border-box;}
body{
  padding: 3em;
}
nav{
  width: 20%;
  min-width: 18em;
  margin: 0 auto;
}
h1{
  position: relative;
  display: inline-block;
  font: 2em/1em sans-serif;
  cursor: pointer;
  user-select: none;
  height: 2.1em;
}
h1:after{
  content:"";
  border: 10px solid transparent;
  border-top-color: #ccc;
  position: absolute;
  right: -30px;
  top: 15px;
}
h1:hover + ul{
  display: block;
}
ul{
 background: #eee;
 border: 1px solid #ddd;
 border-radius: 1%;
 display: none;
 position: relative;
 top: -4.5em;
}
ul:hover{
  display: block;
}
li{
 padding: 3% 5%;
 border-top: 1px solid #fff;
 border-bottom: 1px solid #ddd;
 cursor: pointer;
}
li:first-child{border-top: none;}
li:last-child{border-bottom: none;}
li:hover{background: linear-gradient(#eee,#ddd);}

Leave a Reply