Google maps

tutorial: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

by Wolf

HTML

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOW7b0eVJzLBlTz1eY9XP04VJ48C_uaMQ&callback=initMap"
    async defer></script>

CSS

#map-canvas {
    height: 600px;
    width: 600px;
    background-color: #CCC;
}

JavaScript

function initMap() {
  const myLatLng = new google.maps.LatLng(45.4375, 12.3358);
  const myOptions = {
    zoom: 5,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  let map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
  const point = {
    geometry: myLatLng,
    id: 1,
    properties: {
      warn: false
    }
  };
  dl = new google.maps.Data({map: map});
  console.log("Adding feature:");
 	console.log(point);
  dl.setStyle(setStyle);
  dl.add(point);
  dl.addListener('mouseover', e => {
  	e.feature.setProperty("warn", true);
  });
	 dl.addListener('mouseout', e => {
  	e.feature.setProperty("warn", false);
  });
}

function setStyle(feature) {
	console.log('setting style for feature');
	const warn = feature.getProperty('warn');
  let icon = 'https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png';
	if (warn) {
  	icon = 'https://maps.google.com/mapfiles/kml/shapes/caution.png';
  }
  const style = {
  	title: feature.getId(),
  	icon: icon
  };
  console.log("style = " + style);
  return style;
}