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="mack-map"></div>

CSS

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

JavaScript

jQuery(function($) {
  var markers = [];
  var activeIcon = {
    url: 'http://maps.google.com/mapfiles/ms/micons/yellow.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    //size: new google.maps.Size(32, 32),
    // The origin for this image is 0,0.
    //origin: new google.maps.Point(130.3065885, -193.6986437),
    // The anchor for this image is the base of the flagpole at 0,32.
    // anchor: new google.maps.Point(16, 40)
  };
  var normalIcon = {
  url: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  };
  var locations = [
    ['<b>Name</b><br>Address<br>state<br>', 34.845244, -80.371634, 4],
    ['<b>Name</b><br>Address<br>state<br>', 34.845, -80.375, 4],
  ];

  var mapOptions = {
    center: new google.maps.LatLng(34.845244, -80.371634),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    zoomControl: true,
    scrollwheel: false
  };
  map = new google.maps.Map(document.getElementById("mack-map"), mapOptions);

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        //console.log(activeIcon);
        for (var j = 0; j < markers.length; j++) {
          markers[j].setIcon(normalIcon);
        }
        infowindow.setContent(locations[i][0]);
        this.setIcon(activeIcon)
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
});