custom-google-map.html

<div class="neighborhood-map">
	
		
		<!-- <div id="map"></div> -->
		<script>
			var map;

	      function initMap() {
	        var mapDiv = document.getElementById('map');	
	        map = new google.maps.Map(mapDiv, {
	          center: {lat: 29.78, lng: -95.35},
	          zoom: 11,
	          scrollwheel: false,
	        });

	        // styles
	        map.set('styles', [
	        {
	        	featureType: 'road',
	        	elementType: 'geometry',
	        	stylers: [
	        		{ color: '#f1c27f' },
	        		
	        	]
	        }, {
	        	featureType: 'road',
	        	elementType: 'labels',
	        	stylers: [
	        		{ saturation: -10 },
	        		
	        	]
	        }
	        ]);

	        


            // icons
	        var iconBase = '<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/';
	        var icons = {
	          info: {
	            name: 'Info',
	            icon: iconBase + 'marker.png'
	          }
	        };

			function addMarker(neighborhood) {
	          var marker = new google.maps.Marker({
	            position: neighborhood.position,
	            icon: icons[neighborhood.type].icon,
	            map: map
	          });

	          // add infowindow data
              var infowindow = new google.maps.InfoWindow({
                   content: '<div id="iw_container">' +
                  '<div class="iw_title">' + neighborhood.title + '</div></div>'
                });

              google.maps.event.addListener(marker, 'click', function() {
                   infowindow.open(map,marker); //map and marker are the variables defined previously
                });

              google.maps.event.addListener(map, 'click', function() {
  	            infowindow.close();
  	          });
	        }

	        var neighborhoods = [
                 {
                   position: new google.maps.LatLng(29.7575263, -95.3756244),
                   type: 'info',
                   title: 'Downtown'
                 }, {
                   position: new google.maps.LatLng(29.7572269, -95.7293006),
                   type: 'info',
                   title: 'Energy Corridor'
                 }, {
                   position: new google.maps.LatLng(29.7379052, -95.4664973),
                   type: 'info',
                   title: 'Galleria/Uptown'
                 }, {
                   position: new google.maps.LatLng(29.7323488, -95.4336932),
                   type: 'info',
                   title: 'Greenway Plaza'
                 }, {
                   position: new google.maps.LatLng(29.714659, -95.4108154),
                   type: 'info',
                   title: 'Medical Center'
                 }, {
                   position: new google.maps.LatLng(29.7737229, -95.4457722),
                   type: 'info',
                   title: 'Memorial Heights'
                 }, {
                   position: new google.maps.LatLng(29.7415607, -95.3927636),
                   type: 'info',
                   title: 'Midtown'
                 }, {
                   position: new google.maps.LatLng(29.7201774, -95.4014599),
                   type: 'info',
                   title: 'Montrose'
                 }, {
                   position: new google.maps.LatLng(29.7980032, -95.4155468),
                   type: 'info',
                   title: 'The Heights'
                 }, {
                   position: new google.maps.LatLng(30.1683148, -95.5940634),
                   type: 'info',
                   title: 'The Woodlands'
                 }, {
                   position: new google.maps.LatLng(29.7173941, -95.4040252),
                   type: 'info',
                   title: 'Rice Village'
                 }, {
                   position: new google.maps.LatLng(29.7323488, -95.4336932),
                   type: 'info',
                   title: 'River Oaks'
                 }
                ];

            for (var i = 0, neighborhood; neighborhood = neighborhoods[i]; i++) {
                 addMarker(neighborhood);
               }

	      }

	        




	    </script>

		<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>


	</div><!-- .neighborhood-map -->