Map with Marker

by DupontTD

HTML

<h3>My Google Maps Demo</h3>
<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=AIzaSyCZj6jlvGo38oMRjTc1UkQEDDwwL0uIzag">
</script>

CSS

#map {
  height: 400px;
  width: 100%;
 }

JavaScript

let options = {
};

function success( {coords}) {

  let infoWindow = new google.maps.InfoWindow();

/*
   * marker creater function (acts as a closure for html parameter)
   */
  function createMarker(options, html) {
    let marker = new google.maps.Marker(options);
    if (html) {
      google.maps.event.addListener(marker, "mouseover", function () {
        infoWindow.setContent(html);
        infoWindow.open(options.map, this);
      });
      google.maps.event.addListener(marker, "mouseout", function () {
        //infoWindow.setContent(html);
        infoWindow.close(options.map, this);
      });
       
    }
    return marker;
  }

  /*
   * add markers to map
   */

 console.log = ` ${coords.latitude},${coords.longitude}`;
 
 let myPos = {lat: coords.latitude, lng: coords.longitude};
 
 let map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: myPos
  });
  
  createMarker({
    position: myPos,
    map: map,
    icon: "https://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png"
  }, `<h1>Maison ou boulot </h1>
  
  j'arrive`);
 
  
};

function error(err) {
  console.warn(`ERROR(${err.code}): ${err.message}`);
};

navigator.geolocation.getCurrentPosition(success, error, options);