Cacher is the code snippet organizer for pro developers

<style type="text/css">
   #map { height: 400px; }
</style>
<div id="map"></div>
<script type="text/javascript">
   var map;
   var hotelMarker = { lat:-23.029345327593884, lng:-46.74948692321777 };
   function initMap() {

      //layout do mapa
      var styles = [''];//BAIXAR TEMAS EM https://snazzymaps.com/
      var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});

      var mapOptions = {
         center: hotelMarker,
         mapTypeControl: false,
         zoomControl: true,
         zoomControlOptions: {
           position: google.maps.ControlPosition.LEFT_CENTER
         },
         scaleControl: true,
         streetViewControl: false,
         scrollWheelZoom:'center',
         scrollwheel: false,
         zoom: 13,
         mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
         }
      };

      var map = new google.maps.Map(document.getElementById('map'),mapOptions);

      map.mapTypes.set('map_style', styledMap);
      map.setMapTypeId('map_style');

      var image = '<?= TEMPLATE_URL; ?>/img/marker.png';
      var image = {
          url: '<?= TEMPLATE_URL; ?>/img/marker.png',
          origin: new google.maps.Point(0, 0),
          // o anchor é onde fica a base do ícone do marcador
          anchor: new google.maps.Point(0, 32)
        };

      var marker = new google.maps.Marker({
         position: hotelMarker,
         map: map,
         animation: google.maps.Animation.DROP,
         title: 'Hotél Lazuli',
         icon: image
      });

      //DEBUG
      //Pega posição de onde clicar no mapa
      google.maps.event.addListener(map, 'click', function(event) {
         console.log( 'lat:' + event.latLng.lat() + ', lng:' + event.latLng.lng() );
      });


   }
</script>
<script async defer
   src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>