Google Map with Custom Marker

by toubia95

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- https://maps.googleapis.com/maps/api/js -->
<div id="map">
</div>
<img id="boussole" src="https://gtoubiana.github.io/rotations/compass/www/assets/images/boussole01-fond.png">
<img id="aiguille" src="https://gtoubiana.github.io/rotations/compass/www/assets/images/boussole01-aiguille.png">

CSS

/* https://developers.google.com/maps/documentation/javascript/tutorial?hl=fr */
/* https://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
 */
body {
  font: 12px sans-serif;
}
html,
body,
#map, h1, p {
  margin: 0;
  padding: 0;
}
html,
body,
#map {
  width: 100%;
  height: 100%;
}


#map {
  
  overflow: hidden;
}

#boussole, #aiguille {
  display: block;
  width: 200px;
  height: 200px;
     margin-top: -100px; /* Half the height */
   margin-left: -100px; /* Half the width */
  z-index: 1;
position: absolute;
top: 50%;
left: 50%;
}

#aiguille {
  transform: rotate(45deg);
}

JavaScript

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

  /*
   * create map
   */
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(48.6531836, 6.1495322),
    zoom: 16,
    // ROADMAP, SATELLITE, HYBRID, TERRAIN
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    // roadmap, satellite, terrain
    // mapTypeId: 'hybrid',
    //disableDefaultUI: true,
    //heading: 90,
    //tilt: 45
  });

});