abel-masila · July 13, 2019 10:29
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <a class="navbar-brand" href="#">Saidia App</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/"
              >Home <span class="sr-only">(current)</span></a
            >
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input
            class="form-control mr-sm-2"
            type="search"
            placeholder="Search"
            aria-label="Search"
          />
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
            Search
          </button>
        </form>
      </div>
    </nav>

    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      // Initialize and add the map
      function initMap() {
        // The location of Uluru
        var myLatLng = { lat: 0.52036, lng: 35.26993 };
        // The map, centered at Uluru
        var map = new google.maps.Map(document.getElementById("map"), {
          zoom: 12,
          center: myLatLng
        });
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: "Add Details!"
        });
        var infowindow = new google.maps.InfoWindow({
          content: "Enter your details here.."
        });
        marker.addListener("click", function() {
          infowindow.open(map, marker);
        });
      }
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script
      async
      defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCO4pYePkJV8wNphrealcXxOj0F9M3b3Ts&callback=initMap"
    ></script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	/* Set the size of the div element that contains the map */
	#map {
	height: 400px; /* The height is 400 pixels */
	width: 100%; /* The width is the width of the web page */
	}
	</style>
	<link
	rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	crossorigin="anonymous"
	/>
	</head>
	<body>
	<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
	<a class="navbar-brand" href="#">Saidia App</a>
	<button
	class="navbar-toggler"
	type="button"
	data-toggle="collapse"
	data-target="#navbarSupportedContent"
	aria-controls="navbarSupportedContent"
	aria-expanded="false"
	aria-label="Toggle navigation"
	>
	<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav mr-auto">
	<li class="nav-item active">
	<a class="nav-link" href="/"
	>Home <span class="sr-only">(current)</span></a
	>
	</li>
	</ul>
	<form class="form-inline my-2 my-lg-0">
	<input
	class="form-control mr-sm-2"
	type="search"
	placeholder="Search"
	aria-label="Search"
	/>
	<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
	Search
	</button>
	</form>
	</div>
	</nav>

	<!--The div element for the map -->
	<div id="map"></div>
	<script>
	// Initialize and add the map
	function initMap() {
	// The location of Uluru
	var myLatLng = { lat: 0.52036, lng: 35.26993 };
	// The map, centered at Uluru
	var map = new google.maps.Map(document.getElementById("map"), {
	zoom: 12,
	center: myLatLng
	});
	var marker = new google.maps.Marker({
	position: myLatLng,
	map: map,
	title: "Add Details!"
	});
	var infowindow = new google.maps.InfoWindow({
	content: "Enter your details here.."
	});
	marker.addListener("click", function() {
	infowindow.open(map, marker);
	});
	}
	</script>
	<!--Load the API from the specified URL
	* The async attribute allows the browser to render the page while the API loads
	* The key parameter will contain your own API key (which is not needed for this tutorial)
	* The callback parameter executes the initMap() function
	-->
	<script
	async
	defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCO4pYePkJV8wNphrealcXxOj0F9M3b3Ts&callback=initMap"
	></script>
	</body>
	</html>