Map icons

by wintlu

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Vector Initial Static Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&v=beta&map_ids=62a6c17b8425251,514436b0710ce497&libraries=places"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
  <div>
  </div>
    <div class="container">
      <div id="map" class="map"></div>
    </div>
    <h4>
       Click a POI to see the icon returned from place detail API (<a href="https://developers.google.com/maps/documentation/javascript/place-icons">doc</a>)
    </h4>
    <div id="logs">
    
    </div>
  </body>
</html>

CSS

html,
body,
.container {
  height: 500px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

.map {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  height: 100%;
}

JavaScript

(function(exports) {
  "use strict";

  // Initialize and add the side by side maps
  function initMap() {
    var mapID = "";
    mapID = "62a6c17b8425251"
    mapID = "514436b0710ce497"

    const map = new google.maps.Map(document.getElementById("map"), {
      center: {
        lat: 37.7623706,
        lng: -122.4529756
      },
      zoom: 13,
      mapId: mapID,
    });

    const placesService = new google.maps.places.PlacesService(map);
		let counter = 0;
    
    map.addListener('click', e => {
      if (e.placeId) {
        placesService.getDetails({
          placeId: e.placeId
        }, (place, status) => {
          if (status === 'OK' && place && place.geometry && place.geometry.location) {

						counter+=1;
            const logs = document.getElementById('logs');
            const icon = `<img src="${place.icon}" width="20px" height="20px"/>`;

            const iconMask = `<img src="${place.icon_mask_base_uri}.png" width="20px" height="20px"/>`;

            logs.innerHTML = logs.innerHTML +
              ` <div> ${counter} - ${place.name}, icon: ${icon}, icon_mask_base_uri: ${iconMask}</div>`;

          }
        });
      }
    });





  }


  exports.initMap = initMap;
})((this.window = this.window || {}));