JSFiddle - React, Tailwind, and code Playground

by Kenny Wyland

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>
 <div id="map_canvas" style="width: 400px; height: 400px; border: 1px solid orange; display: inline-block;"></div>
<div id="pano" style="width: 400px; height: 400px; border: 1px solid green; display: inline-block;"></div>

JavaScript

function load_map_and_street_view_from_address(address) {
			// Check if GPS has been locally cached.
			var geocoder = new google.maps.Geocoder();
			geocoder.geocode( { 'address': address }, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {

					var gps = results[0].geometry.location;
					create_map_and_streetview(gps.lat(), gps.lng(), 'map_canvas', 'pano');
				}
			});
		}

		function  create_map_and_streetview(lat, lng, map_id, street_view_id) {

			var panorama = new google.maps.StreetViewPanorama(document.getElementById(street_view_id));
			var addLatLng = new google.maps.LatLng(lat,lng);
			var service = new google.maps.StreetViewService();
			service.getPanoramaByLocation(addLatLng, 50, function(panoData, status) {
				if (status != google.maps.StreetViewStatus.OK) {
					$('#pano').html('No StreetView Picture Available').attr('style', 'text-align:center;font-weight:bold').show();
					return;
				}
				var angle = google.maps.geometry.spherical.computeHeading(panoData.location.latLng, addLatLng);

				var panoOptions = {
					position: addLatLng,
					addressControl: false,
					linksControl: false,
					panControl: false,
					zoomControlOptions: {
						style: google.maps.ZoomControlStyle.SMALL
					},
					pov: {
						heading: angle,
						pitch: 0,
						zoom: 1
					},
					enableCloseButton: false,
					visible:true
				};

				panorama.setOptions(panoOptions);
			});

			var myOptions = {
				zoom: 14,
				center: addLatLng,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				backgroundColor: 'transparent',
				streetViewControl: false,
				keyboardShortcuts: false
			};
			var map = new google.maps.Map(document.getElementById(map_id), myOptions);
			var marker = new google.maps.Marker({
				map:map,
				animation: google.maps.Animation.DROP,
				position: addLatLng
			});
		}

		$(document).ready(function() {
			console.log('ready');
			load_map_and_street_view_from_address("2131 S SAN ANTONIO AVE, ONTARIO, CA...