Google maps draggable with geolocate

gmaps-draggable.js

/**
 *
 * Google Map
 *-------------------------------------
 */

$('.googleMap').each(function() {
	var $map = $(this),
		lat = ($map.attr('data-lat') ? parseFloat($map.data('lat')) : 0),
		lng = ($map.attr('data-lng') ? parseFloat($map.data('lng')) : 0),
		draggable = Boolean(!!$map.attr('data-input-lat') && !!$map.attr('data-input-lng')),
		autoUpdate = !Boolean($map.attr('data-lat') && $map.attr('data-lng')), // Set auto update flag to true if lat lng inputs are empty (first time editing)
		mapOptions = {
			center: { lat: lat, lng: lng},
			scrollwheel: false,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			mapTypeControl: false,
			zoom: 14
		};

	var geocoder = new google.maps.Geocoder();
	var map = new google.maps.Map(this, mapOptions);

	var marker = new google.maps.Marker({
		map: map,
		title: ($map.data('title') ? $map.data('title') : 'location name here'),
		position: new google.maps.LatLng(lat, lng),
		draggable: draggable,
		icon: {
			url: '/images/admin/icons/hd-dealer-placemarker.' + ((Modernizr.svg) ? 'svg' : 'png'),
			anchor: new google.maps.Point(17,61),
			scaledSize: new google.maps.Size(34,61)
		}
	});

	if (draggable) {
		google.maps.event.addListener(marker, "dragend", function(event) {

			lat = event.latLng.lat();
			lng = event.latLng.lng();

			$($map.data('input-lat')).val(lat);
			$($map.data('input-lng')).val(lng);

			autoUpdate = false;

			$map.siblings('.googleMap-resetBtn').fadeIn();

		});
	}


	function codeAddress() {
		var address = [];

		$($map.data('default')).find('input[type=text]').each(function() {
			if ( $(this).val() ) address.push($(this).val());
		});

		geocoder.geocode( { 'address': address.join(', ')}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);

				marker.setPosition(results[0].geometry.location);

				if (draggable) {
					$($map.data('input-lat')).val(results[0].geometry.location.A);
					$($map.data('input-lng')).val(results[0].geometry.location.F);
				}

				if (results[0].geometry.viewport) {
					map.fitBounds(results[0].geometry.viewport);
				}
			} else {
				console.log('Geocode was not successful for the following reason: ' + status);
			}
		});
	}

	// If no lat long set then use address even if just the country
	if (autoUpdate) {
		codeAddress();
	}

	$map.siblings('.googleMap-resetBtn').hide();

	$map.siblings('.googleMap-resetBtn').on('click',function(event) {
		event.preventDefault();
		codeAddress();

		autoUpdate = true;

		$map.siblings('.googleMap-resetBtn').fadeOut();
	});

	// If default set
	if (!!$map.attr('data-default')) {
		$($map.attr('data-default')).on('change', 'input[type=text]', function() {
			if (autoUpdate) {
				codeAddress();
			}
		});
	}

});

google-maps.html

<div class="g-row">
	<div id="googleMap-form" class="g-col g-span6">

		<div class="form-controlGroup form-controlGroup--">
			<label class="form-label" for="street">Street address</label>

			<div class="inputWrapper">
				<div data-repeater-list="line">
					<div data-repeater-item class="inputWrapper">
						<input id="street" name="street" class="form-input" type="text" />
					</div>
				</div>

				<span data-repeater-create class="link inputWrapper-caption inputWrapper-caption--right">
					<i class="icon icon--expand"></i>
					<span class="link link--underlined link--slightlySmaller">Add line</span>
				</span>
			</div>

		</div>


		<div class="form-controlGroup">
			<label class="form-label" for="city">Town / City</label>
			<div class="inputWrapper">
				<input id="city" name="city" class="form-input" type="text" />
			</div>
		</div>

		<div class="form-controlGroup">
			<label class="form-label" for="county">County / State</label>
			<div class="inputWrapper">
				<input id="county" name="county" class="form-input" type="text" />
			</div>
		</div>

		<div class="form-controlGroup">
			<label class="form-label" for="postcode">Postcode / Zip</label>
			<div class="inputWrapper">
				<input id="postcode" name="postcode" class="form-input" type="text" />
			</div>
		</div>

		<div class="form-controlGroup">
			<label class="form-label" for="country">Country</label>
			<div class="inputWrapper">
				<input id="country" name="country" class="form-input" type="text" value="Australia" disabled/>
			</div>
		</div>

	</div>
	<div class="g-col g-span6">
		<div class="form-controlGroup">
			<span class="form-label">
				Edit marker location
				<a href="#" title="This is an example tooltip. This is an example tooltip. This is an example tooltip." class="tooltip tooltip--helpBtn"></a>
			</span>
			<div class="inputWrapper">
				<!-- IMPORTANT! Leave lat lng empty if not previously set -->
				<div class="googleMap" data-lat="" data-lng="" data-title="Harley-Davidson&reg; Cape Town" data-input-lat="#lat" data-input-lng="#lng" data-default="#googleMap-form"></div>
				<a href="#" class="btn btn--refresh googleMap-resetBtn">Reset marker</a>
			</div>
			<input type="hidden" id="lat" name="lat" value="" />
			<input type="hidden" id="lng" name="lng" value="" />
		</div>
	</div>
</div>