<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="https://rawgit.com/Logicify/jquery-locationpicker-plugin/master/dist/locationpicker.jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
Location: <input type="text" id="location" style="width: 200px"/>
Lat <input type="text" id="lat" style="width: 200px"/>
Long: <input type="text" id="lng" style="width: 200px"/>
<div id="us2" style="width: 500px; height: 400px;"></div>
</body>
</html>
$(function() {
$('#us2').locationpicker({
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
radius: 0,
inputBinding: {
latitudeInput: $('#lat'),
longitudeInput: $('#lng'),
locationNameInput: $('#location')
},
enableAutocomplete: true,
onchanged: function(currentLocation, radius, isMarkerDropped) {
alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")");
}
});
});
/* Styles go here */