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>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>

CSS

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

JavaScript

function addMapLabel(text, latlng, map) {
  var labelText = "<b>" + text + "</b>";

  var myOptions = {
    content: labelText,
    boxStyle: {
      border: "none",
      textAlign: "center",
      fontSize: "8pt",
      width: "auto",
      color: "#800000"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(10, -10),
    position: latlng,
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
  };

  var ibLabel = new InfoBox(myOptions);
  ibLabel.open(map);
}
var map;
var options = {
  placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
  latitude: 53.7153659,
  longitude: -1.8790866,
  title: "Dickies Tiles",
  address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}

function initialize() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 15,
    center: {
      lat: options.latitude,
      lng: options.longitude
    }
  });

  marker = new google.maps.Marker({
    map: map,
    title: options.title
  });

  marker.setPlace({
    placeId: options.placeId,
    location: {
      lat: options.latitude,
      lng: options.longitude
    }
  });

  var infowindow = new google.maps.InfoWindow({
    content: '<strong>' + options.title + '</strong><br />' + options.address
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  addMapLabel(options.title, new google.maps.LatLng(options.latitude, options.longitude), map);
}
google.maps.event.addDomListener(window, "load", initialize);