Listify Snippet: Very Raw Idea (consider this as proof of concept) In How to Create Custom Locate Me Button To Get Only City Name.

functions.php

<?php


add_action( 'wp_footer', function() {
	?>
	<script>
		jQuery( document ).ready( function($) {
			// Add custom locate me button.
			$( '.search_location' ).append( '<i class="locate-me-too"></i>' );

			$( ".locate-me-too" ).click( function(e) {
				e.preventDefault();

				var that = $( this );
				that.addClass( 'loading' );

				navigator.geolocation.getCurrentPosition(
					function( position ){ // success cb
						var lat = position.coords.latitude;
						var lng = position.coords.longitude;

						var pos = new google.maps.LatLng( lat, lng );
						var geocoder = new google.maps.Geocoder();

						geocoder.geocode(
							{ 'latLng': pos },
							function( results, status ) {

								if ( status == google.maps.GeocoderStatus.OK && results[0] ) {

									// Update Field with City.
									$( '#search_location' ).val( results[0].address_components[1].long_name );
								}
							}
						);

						that.removeClass( 'loading' );
					},
					function(){ // fail cb
						that.removeClass( 'loading' );
					}
				);
			});
		});
	</script>
	<?php
}, 999 );

add_action( 'wp_head', function() {
	?>
	<style>
		.locate-me {
			display-none;
		}
		.locate-me-too {
			top: 0;
			right: 0;
			z-index: 10;
			position: absolute;
			cursor: pointer;
			width: 40px;
			height: 44px;
			text-align: center;
		}
		.locate-me-too.loading:before {
			content: '\f29c';
			animation: rotate 700ms infinite linear;
			display: inline-block;
			font-family: "Ionicons";
			speak: none;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			text-rendering: auto;
			line-height: 1;
			-webkit-animation: rotate 700ms infinite linear;
			-moz-animation: rotate 700ms infinite linear;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
	</style>
	<?php
}, 999 );