google maps: require key

by Leo

HTML

<div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.21&libraries=geometry,places&callback=initMap" async defer></script>

CSS

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}
#map {
   height: 500px;
   width: 500px;
}

JavaScript

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-33.8688, 151.2195),
    zoom: 17
  });

var markerImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAlCAMAAAAUaRt1AAAAVFBMVEUgftD///8ATJ7y8vLW1tbj4+MCYLL8/PwUbL729vbo6Oj19fU/hsTt7e3v9Poadsjf398KaLp2qtjb6PShxOJXlcwdcbrn7/cLabtrotLR4vFcndXkn2FYAAABHElEQVQ4jaXTWbKDIBAF0GaQySCombP/fb5GZNAHlY/cP+seFcQGQqTUI2tk1FISAkRqZs3QiLFMSwLYG8+b8QYFSGY47YQbJkFbT5WDRpyi3moY8QF7L3J2gY8YgQ2c7rcIsmcHQPnADuAR+0cX3HXo9b0HcBHXdb2mJTQAzBdCLjP0gQpA/QCcCEC4HsD+PU3vIk7AiVv8DrckTiBsISZt5ATEmsAq2kAmIDtgyumAkNerOu//Hwqey/IsVw0wL8v8G1DfXqE+H3UC1U+LcZhysf20X3/7MjjVs1U1OGX0ilC0Gr00vN5ngb33eXjT+CPyUeCrQ5nHP52gtlGE3up8shkkceorsAncED/0NQjChLXV/QFsG9qWXuUPZ6ARI+eOptAAAAAASUVORK5CYII=";

  var marker = new google.maps.Marker({
    anchorPoint: new google.maps.Point(-33.8688, 151.2195),
    icon: {url: markerImage},  
    map: map
  });
}