File: D:/HostingSpaces/RClaassen/stay-on-track.nl/wwwroot/vacatures/location_picker.html
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=false&libraries=places'></script>
<script src="/javascript/locationpicker.js"></script>
</head>
<body>
<table>
<tr>
<td>Straat</td>
<td><input type="text" name="straat" value="Vlierdensedijk"></td>
</tr>
<tr>
<td>Huisnummer</td>
<td><input type="text" name="huisnummer" value="20"></td>
</tr>
<tr>
<td>Toevoeging</td>
<td><input type="text" name="toevoeging" value=""></td>
</tr>
<tr>
<td>Postcode</td>
<td><input type="text" name="postcode" value="1234AB"></td>
</tr>
<tr>
<td>Plaats</td>
<td><input type="text" name="plaats" value="Helmond"></td>
</tr>
<tr>
<td>Land</td>
<td><input type="text" name="land_naam" id="land_naam" value="Nederland"></td>
</tr>
<tr><td colspan="2"><div id="somecomponent" style="width: 500px; height: 400px;"></div></td></tr>
<tr>
<td></td>
<td><input type="submit" class="button" value="Opslaan"/>
</tr>
<tr>
<td>Breedtegraad</td>
<td><input type="text" name="breedtegraad" id="breedtegraad" value=""></td>
</tr>
<tr>
<td>Lengtegraad</td>
<td><input type="text" name="lengtegraad" id="lengtegraad" value=""></td>
</tr>
</table>
<input type="hidden" id="land_id" name="land_id" value="1" />
</form>
<script>
$('#somecomponent').locationpicker({
location: {
latitude: 52.140575455652545,
longitude: 5.103505255310097
},
zoom: 7,
onchanged: function(currentLocation, radius, isMarkerDropped) {
console.log(currentLocation);
$('#breedtegraad').val(currentLocation.latitude);
$('#lengtegraad').val(currentLocation.longitude);
}
});
</script>
</body>
</html>