Info windows

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// This example puts a marker at RAWR
// When the user clicks the kitty marker, an info window opens.

function initMap() {

// var kitty is the location of RAWR in longitude and latitude

  var kitty = {lat: 37.806176, lng: -122.26724};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    // center the map at RAWR
    center: kitty
  });

// This code is for the info that pops up when you click the kitty
  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">RAWR</h1>'+
      '<div id="bodyContent">'+
      '<p>located at 1721 1/2 Webster St '+
			'<br>Oakland, CA 94612 </p>' +
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: kitty,
    
    // replace the url with a png link to any image you want. It works best if the image is about 40 x 40 pixels wide. 
    
    icon: 'http://www.animated-gifs.eu/category_animals/mammals-cats-15/0015.gif',
    map: map,
    title: 'RAWR'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}