JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id='map_canvas'></div>
CSS
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#map_canvas{
width: 800px;
height: 500px;
}
JavaScript
$(document).ready(function() {
var latlng = new google.maps.LatLng(43.0569, -89.4511);
var settings = {
zoom: 12,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map($('#map_canvas')[0], settings);
var urlIcon = 'http://bobcravens.com/Content/images/author_thumb.png';
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'test',
icon: urlIcon
});
});