Saturday, 19 July 2014

Google Map Spinner in JQuery

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="//">
    <script src=""></script>
    <script src="//"></script>
    <script src="/resources/demos/external/jquery.mousewheel.js"></script>
    <script src="//"></script>
        #map {
            width: 500px;
            height: 500px;
            border: 1px solid Black;

        $(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
    <label for="lat">Latitude</label>
    <input id="lat" name="lat" value="25.953">
    <label for="lng">Longitude</label>
    <input id="lng" name="lng" value="83.561">

    <div id="map"></div>

No comments:

Post a Comment