SELEP - BBO
by andyjh07
HTML
<h3>My Google Maps Demo - <a href="http://www.latlong.net/convert-address-to-lat-long.html">Convert address to latlng</a></h3>
<h4>*Yellow pins will be active on live site*</h4>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcmdLeT1BAVksYwvNMqOK7MszXXdFg618&callback=initMap">
</script>
CSS
#map {
height: 100vh;
width: 100vw;
}
JavaScript
(function() {
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(51.1951855,0.4607276),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Styling JSON object
styles: [{
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#f5f5f5"
}]
}, {
"featureType": "administrative.land_parcel",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#bdbdbd"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#eeeeee"
}]
}, {
"featureType": "poi",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"featureType":...