JSFiddle - React, Tailwind, and code Playground
HTML
<!-- START: Google Maps API -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- __END: Google Maps API -->
<div id="map-container" >
<div id="map_StreetView" style="width: 350px; height: 250px">
</div><br/>
<div id="map" style="width: 350px; height: 250px"></div>
</div>
JavaScript
//<![CDATA[
// ************************ Variables ************************
//****** Map Options ******//
var roadmap =
{
infoWindow: new google.maps.InfoWindow(),
options:
{
map:
{
center: new google.maps.LatLng( 34.021868, -118.29322300000001 ),
zoom: 15,
mapTypeId: 'roadmap'
}
}
};
roadmap.options.marker =
{
position: roadmap.options.center,
title: 'Hello',
icon: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
shadow: 'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png'
};
//****** Street view Options ******//
var StreetView =
{
options:
{
position: roadmap.options.map.center,
zoom: 1
},
geometry:
{
MaxDistance: 30,
cameraHeading: 0
}
};
StreetView.StreetViewService = new google.maps.StreetViewService();
// ************************ Functions ************************
//****** InfoWindow ******//
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
infoWindow.getContent();marker.openInfoWindowTabsHtml(infoTabs);
});
}
//****** onLoad ******//
function googleMaps()
{
// ************************ Road map ************************
roadmap.map = new google.maps.Map(document.getElementById("map"), roadmap.options.map );
// ************************ Road map's Marker ************************
roadmap.options.marker.map = new google.maps.Map(document.getElementById("map"), roadmap.options.map );
roadmap.marker = new google.maps.Marker( roadmap.options.marker );
// ************************ ...