JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places®ion=uk&language=en&sensor=true"></script>
<script type="text/javascript" src="http://bobcravens.com/files/jquery.gmap3.js"></script>
</head>
<body>
<div id="content">
<input id="searchTextField" type="text" size="50" style="text-align: left;width:357px;direction: ltr;">
<div id="map_canvas" class="line"></div>
<div id="latlng" class="line">click the map</div>
<div id="address" class="line">click the map</div>
</div>
</body>
</html>
CSS
h1
{
font-size: 16px;
}
#map_canvas
{
width: 400px;
height: 300px;
margin: 10px auto;
}
div#latlng-control
{
background: #ffc;
border: 1px solid #676767;
padding: 2px 4px;
position: absolute;
}
.line
{
padding: 3px;
}
JavaScript
$(document).ready(function () {
// create the map
var map = $("#map_canvas").gmap3({
lat: 43.0566,
lng: -89.4511,
zoom: 12
});
//*********************** Autocomplete *********************************
var lat = 26.535266981346876,
lng = 54.02773082256317,
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
mapG = new google.maps.Map(document.getElementById('map_canvas')),
marker = new google.maps.Marker({
position: latlng,
map: mapG,
icon: image
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', mapG);
var infowindow = new google.maps.InfoWindow();
//*********************** Autocomplete *********************************
// add click handlers
map.onclickReverseGeocode(function (address) {
$("#address").html(address);
});
map.onclickGetLatLng(function (latlng) {
$("#latlng").html(latlng[0] + ',' + latlng[1]);
});
});