itsRealoj/display-google-map.markdown

## display-google-map.markdown

      
    Raw
  

              display-google-map.markdown
            
          
    Display Google map

A Pen by Stephen Ochieng on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>
 <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <head>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5OBQoffI187G4XX_IeCJBUGmt33d6yV0&callback=initMap">
    </script>
  </body>
</html>

## script.js

// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
  let mapId = 'AIzaSyBhwwJqT3bvyL2Ck2uFNWlv2ZYH8DfGOdw';
}


## style.css
 /* 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 */
       }
	<!DOCTYPE html>
	<html>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<head>
	</head>
	<body>
	<h3>My Google Maps Demo</h3>
	<!--The div element for the map -->
	<div id="map"></div>

	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5OBQoffI187G4XX_IeCJBUGmt33d6yV0&callback=initMap">
	</script>
	</body>
	</html>

	// Initialize and add the map
	function initMap() {
	// The location of Uluru
	var uluru = {lat: -25.344, lng: 131.036};
	// The map, centered at Uluru
	var map = new google.maps.Map(
	document.getElementById('map'), {zoom: 4, center: uluru});
	// The marker, positioned at Uluru
	var marker = new google.maps.Marker({position: uluru, map: map});
	let mapId = 'AIzaSyBhwwJqT3bvyL2Ck2uFNWlv2ZYH8DfGOdw';
	}
	/* 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 */
	}