jQuery UI & Spinner: Map

This entry is part 6 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Map

Google Maps integration, using spinners to change latitude and longitude.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Map</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='http://maps.google.com/maps/api/js?sensor=false'></script>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//jqueryui.com/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        $(function () {
            function latlong() {
                return new google.maps.LatLng($('#lat').val(), $('#lng').val());

            function position() {

            $('#lat, #lng').spinner({
                step: .001,
                change: position,
                stop: position

            var map = new google.maps.Map($('#map')[0], {
                zoom: 8,
                center: latlong(),
                mapTypeId: google.maps.MapTypeId.ROADMAP
        #map {
            width: 500px;
            height: 500px;

<label for='lat'>Latitude</label>
<input id='lat' name='lat' value='44.797'>
<label for='lng'>Longitude</label>
<input id='lng' name='lng' value='-93.278'>

<div id='map'></div>

Try The Code