Google Maps

google maps

by Glynne Turner

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC05YyXxdfEN1bQNl7Vkv_3Q3PfH2ZYc3w"></script>
<section id="map-holder" >
  <div id="map_canvas"> </div>
  
</section>

CSS

*{margin:0; position: relative;  padding:0;}
 
#map-holder{width:100vw; height:100vh; background-color:#efefef}
#map_canvas{ background:green;	width: 100%;
	height: 100%;
  display:flex;   }

JavaScript

function initialize() { 

    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
      mapTypeControl: false,
      center: new google.maps.LatLng(51.42605697741187, -0.22051773441595768  ),
      zoom: 17,
      gestureHandling: 'greedy',
      mapTypeId: google.maps.MapTypeId.street,
      styles:[{ featureType: "poi.business", elementType: "labels", stylers:[{visibility: "off"}]}]


 
    }
    var map = new google.maps.Map(map_canvas, map_options)
	
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(51.42605697741187, -0.22051773441595768 
      ),
      map: map,
      
    });

  }
 

 google.maps.event.addDomListener(window, 'load', initialize);