Lat/Lng drop

by AaronLayton

HTML

<script src="http://threedubmedia.com/inc/js/jquery.event.drag-2.2.js"></script>
<script src="//maps.google.com/maps/api/js?sensor=true&amp;amp;key=AIzaSyBuLVdr4Kx3epVQUv754WFddOGQCUMT4fE"></script>
<button class="js-set">Set</button><input class="lat-coord" placeholder="Latitude" /><input class="lng-coord" placeholder="Longitude" />
<div class="pageContainer text-center">
    <div class="store-map" data-startlat="58.466879" data-startlng="-10.394135" data-endlat="50.4" data-endlng="1.80">
        <div class="map-pin">
            <div class="map-pin__marker"></div>
            <div class="map-pin__shadow"></div>
            <div class="map-pin__cross"></div>
        </div>
        <div class="location-output">
            <div class="lat-lng">52.972338, -1.177979</div>
            <div class="address"></div>
        </div>
    </div>
</div>

SCSS

.store-map {
    background:url(http://www.designpreview.co.uk/2014/yoursstore/store-map.jpg) no-repeat;
    display:inline-block;
    height:732px;
    width:602px;
    position:relative;
}

.map-pin {
    /*
    border:1px solid #f00;
    background:#e3e3e3;
    */
    cursor:move;
    height:3px;
    position:absolute;
    width:3px;
    
    top: 181px;
    left: 47px;
}
.map-pin__marker {
    background:url(http://www.designpreview.co.uk/2014/yoursstore/store-map-pin.png) no-repeat;
    height:76px;
    width:40px;
    position: absolute;
    top: 0;
    left: 0;
    margin: -70px 0 0 -19px;
    z-index:3;
}
.map-pin__shadow {
    background:url(http://www.designpreview.co.uk/2014/yoursstore/store-map-shadow.png) no-repeat;
    height:81px;
    width:62px;
    position: absolute;
    top: 0;
    left: 0;
    margin: -64px 0 0 -14px;
    z-index: 2;
    opacity: .7;
}
.map-pin__cross {
    background:url(http://www.designpreview.co.uk/2014/yoursstore/store-pin-cross.png) no-repeat;
    display:none;
    height:7px;
    width:25px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 0 0 -11px;
    z-index:1;
}
.location-output {
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid #E3E3E3;
    position: absolute;
    top: 0;
    left: 50%;
    width: 300px;
    line-height: 20px;
    margin-left: -150px;
    padding: 7px;
    font-family: helvetica,arial;
    font-size: 12px;
    color: #333;
}

.pageContainer {
    margin:25px 0;
}
.text-center {
    text-align:center;
}

JavaScript

var container = $(".store-map"),
    lookupIntent,
    actualLat, actualLng,
    pinX, pinY,
    mapPin = $(".map-pin");

mapPin
    .drag("start",function( ev, dd ){
        dd.limit = {
            top:0,
            left:0
        };
        dd.limit.bottom = dd.limit.top + container.outerHeight() - $( this ).outerHeight();
        dd.limit.right = dd.limit.left + container.outerWidth() - $( this ).outerWidth();    
        
        $(".map-pin__cross",this).stop(true).fadeIn(200);
        $(".map-pin__marker",this).stop(true).animate({ 
            top: -20 
        }, {
          duration: 150,
          easing: "easeInQuad"
        });
        
        $(".map-pin__shadow").stop(true).animate({ 
            top: -15,
            left: 8,
            opacity:.3
        }, {
          duration: 150,
          easing: "easeInQuad"
        });
        
        $(".location-output .address").stop(true).fadeOut();
	})
    .drag("end",function( ev, dd ){
        $(".map-pin__cross",this).stop(true).fadeOut(200);
        $(".map-pin__marker",this).stop(true).animate({ 
            top: 0 
        }, {
          duration: 500,
          easing: "easeOutBounce"
        });
         $(".map-pin__shadow").stop(true).animate({ 
            top: 0,
            left: 0,
            opacity:.7
        }, {
          duration: 500,
          easing: "easeOutBounce"
        });
        
        // When we stop lets set a timeout to lookup the location
        lookupIntent = setTimeout(function(){
            var output = $(".location-output .address");
            // Accuracy can be 0 - 8
            var accuracy = 4;
            $.ajax({
                url: "https://maps.googleapis.com/maps/api/geocode/json?latlng=" + actualLat + "," + actualLng + "&sensor=false&key=AIzaSyBuLVdr4Kx3epVQUv754WFddOGQCUMT4fE",
                success: function(data){
                    if (data.status=="OK") {                        
                        var addressData = undefined;
     ...