Skip to content

Instantly share code, notes, and snippets.

@turtlepod

turtlepod/functions.php

Last active Aug 18, 2019
Embed
What would you like to do?
Listify Snippet: Very Raw Idea (consider this as proof of concept) In How to Create Custom Locate Me Button To Get Only City Name.
<?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 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment