JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas"></div>

CSS

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var geocoder;
var map;
var markers = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  createMarker({
    name: "center",
    id: 2,
    about: "",
    location: {
      lat: 37.4419,
      lng: -122.1419
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
// Create a marker on the map for a location
function createMarker(restaurant) {
  var position = restaurant.location;
  var infowindow = new google.maps.InfoWindow({
    maxWidth: 200
  });

  restaurant.marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: pinSymbol('#CD212A', '#CD212A'),
    name: restaurant.name,
    id: restaurant.id,
    about: restaurant.about,
    animation: google.maps.Animation.DROP
  });

  // Push the marker to array of markers
  markers.push(restaurant.marker);

  // Call populateInfoWindow function
  populateInfoWindow(restaurant.marker, infowindow);

  // Add infowindow as a property to restaurant
  // this makes it available for use outside this function.
  restaurant.infowindow = infowindow;

  // Open infowindow when marker is clicked and change color
  restaurant.marker.addListener('click', function() {
    if (this.getIcon().fillColor != "#EED4D9") {
      this.setIcon(pinSymbol('#EED4D9', 'black'));
    } else {
      this.setIcon(pinSymbol('#CD212A', '#CD212A'));
    }
    console.log(restaurant.marker);
    infowindow.open(map, this);
  });
}

// Create pin for google map marker
function pinSymbol(color, strokeColor) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: strokeColor,
    strokeWeight: 1,
    scale: 1,
    labelOrigin: new google.maps.Point(0, -29)
  };
}

function populateInfoWindow(marker, infowindow) {
 ...