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
var roadmap =
{
infoWindow: new google.maps.InfoWindow(),
options:
{
map:
{
center: new google.maps.LatLng( 34.021868, -118.29322300000001 ),
zoom: 15,
mapTypeId: 'roadmap'
}
}
};
var bluePin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
new google.maps.Size(32, 32),
new google.maps.Point(0, 0),
new google.maps.Point(0, 32));
var pinShadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
new google.maps.Size(59, 32),
new google.maps.Point(0, 0),
new google.maps.Point(0, 32));
roadmap.options.marker =
{
// CHANGE add .map.
position: roadmap.options.map.center,
title: 'Hello',
icon: bluePin,
shadow: pinShadow
};
//****** 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();
// CHANGE DO NOT HAVE INFOTABS
//marker.openInfoWindowTabsHtml(infoTabs);
});
}
//****** onLoad ******//
function googleMaps()
{
// ************************ Road map ************************
roadmap.map = new...