Skip to content

Instantly share code, notes, and snippets.

@developer-anuragsingh

developer-anuragsingh/custom-widget-google-map.php

Created October 15, 2019 06:54
Show Gist options
  • Save developer-anuragsingh/1feb379cafcb5d6f51f2adb58d096ba4 to your computer and use it in GitHub Desktop.
Save developer-anuragsingh/1feb379cafcb5d6f51f2adb58d096ba4 to your computer and use it in GitHub Desktop.
Download ZIP
Create Google map's custom widget and sidebar to add Lat-long, API Key, Div's class
Raw
custom-widget-google-map.php
<?php
/**
* Register Sidebar
*/
function register_google_map_sidebar() {
/* Register first sidebar name Primary Sidebar */
register_sidebar(
array(
'name' => __( 'Google Map', 'textdomain' ),
'id' => 'google-map',
'description' => __( 'Add google map coordinates.', 'textdomain' ),
)
);
}
add_action( 'widgets_init', 'register_google_map_sidebar' );
/**
* Adds Google_Map widget.
*/
class Google_Map extends WP_Widget {
/**
* Register widget with WordPress.
*/
function __construct() {
parent::__construct(
'google_map', // Base ID
esc_html__( 'Google Map', 'text_domain' ), // Name
array( 'description' => esc_html__( 'Widget area to add google map coordinates.', 'text_domain' ), ) // Args
);
}
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget( $args, $instance ) {
if ( ! empty( $instance['google_api_key'] ) ) {
$google_api_key = apply_filters( 'widget_title', $instance['google_api_key'] );
}
if ( ! empty( $instance['div_class'] ) ) {
$div_class = apply_filters( 'widget_title', $instance['div_class'] );
}
if ( ! empty( $instance['latitude'] ) ) {
$latitude = apply_filters( 'widget_title', $instance['latitude'] );
}
if ( ! empty( $instance['longitude'] ) ) {
$longitude = apply_filters( 'widget_title', $instance['longitude'] );
}
echo '<div id="map" class="' . $div_class . '" data-lat="' . $latitude . '" data-long="' . $longitude . '"></div>';
// Add scripts for widget
wp_enqueue_script( 'google-map', 'http://maps.google.com/maps/api/js?key=' . $google_api_key , array(), false, true );
wp_enqueue_script( 'map', get_template_directory_uri() . '/assets/js/map.js', array(), '20151215', true );
}
/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form( $instance ) {
// input field - latitude
if ( isset( $instance[ 'latitude' ] ) ) {
$latitude = $instance[ 'latitude' ];
}
else {
$latitude = __( '28.6129', 'text_domain' );
}
echo '<p><label for="' . $this->get_field_id( "latitude" ) . '">' . _e( "Latitude:" ) . '</label>';
echo '<input class="widefat" id="' . $this->get_field_id( "latitude" ) . '" name="' . $this->get_field_name( "latitude" ) . '" type="text" value="' . esc_attr( $latitude ) . '" /></p>';
// input field - longitude
if ( isset( $instance[ 'longitude' ] ) ) {
$longitude = $instance[ 'longitude' ];
}
else {
$longitude = __( '77.2295', 'text_domain' );
}
echo '<p><label for="' . $this->get_field_id( "longitude" ) . '">' . _e( "Longitude:" ) . '</label>';
echo '<input class="widefat" id="' . $this->get_field_id( "longitude" ) . '" name="' . $this->get_field_name( "longitude" ) . '" type="text" value="' . esc_attr( $longitude ) . '" /></p>';
// input field - div class
if ( isset( $instance[ 'div_class' ] ) ) {
$div_class = $instance[ 'div_class' ];
}
else {
$div_class = __( 'half-map bg-img-map', 'text_domain' );
}
echo '<p><label for="' . $this->get_field_id( "div_class" ) . '">' . _e( "Div Class Name:" ) . '</label>';
echo '<input class="widefat" id="' . $this->get_field_id( "div_class" ) . '" name="' . $this->get_field_name( "div_class" ) . '" type="text" value="' . esc_attr( $div_class ) . '" /></p>';
// input field - google_api_key
if ( isset( $instance[ 'google_api_key' ] ) ) {
$google_api_key = $instance[ 'google_api_key' ];
}
else {
$google_api_key = __( 'XXXXXXXXXXXXXXXXXX', 'text_domain' );
}
echo '<p><label for="' . $this->get_field_id( "google_api_key" ) . '">' . _e( "Google Api key:" ) . '</label>';
echo '<input class="widefat" id="' . $this->get_field_id( "google_api_key" ) . '" name="' . $this->get_field_name( "google_api_key" ) . '" type="text" value="' . esc_attr( $google_api_key ) . '" /></p>';
}
/**
* Sanitize widget form values as they are saved.
*
* @see WP_Widget::update()
*
* @param array $new_instance Values just sent to be saved.
* @param array $old_instance Previously saved values from database.
*
* @return array Updated safe values to be saved.
*/
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['latitude'] = ( ! empty( $new_instance['latitude'] ) ) ? sanitize_text_field( $new_instance['latitude'] ) : '';
$instance['longitude'] = ( ! empty( $new_instance['longitude'] ) ) ? sanitize_text_field( $new_instance['longitude'] ) : '';
$instance['div_class'] = ( ! empty( $new_instance['div_class'] ) ) ? sanitize_text_field( $new_instance['div_class'] ) : '';
$instance['google_api_key'] = ( ! empty( $new_instance['google_api_key'] ) ) ? sanitize_text_field( $new_instance['google_api_key'] ) : '';
return $instance;
}
}
// class Google_Map
// register Google_Map widget
function register_google_map_widget() {
register_widget( 'Google_Map' );
}
add_action( 'widgets_init', 'register_google_map_widget' );
// function widget_script(){
// global $pagenow;
// if ( 'widgets.php' === $pagenow )
// wp_enqueue_script( 'widget-script', get_stylesheet_directory_uri( ) . '/js/custom-widget.js', array( 'jquery' ), false, true );
// }
// add_action( 'admin_init', 'widget_script' );
Raw
map.js
/* ----- Google Map ----- */
if (jQuery("#map").length) {
var lat = jQuery('#map').attr("data-lat"); // fetch val from page
var long = jQuery('#map').attr("data-long"); // fetch val from page
function initialize() {
var mapOptions = {
zoom: 14,
scrollwheel: false,
styles: [{
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#e9e9e9"
}, {
"lightness": 17
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 20
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}, {
"lightness": 18
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 21
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#d5d5d5"
}, {
"lightness": 21
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#f8f8f8"
}, {
"lightness": 25
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#222222"
}, {
"lightness": 30
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}, {
"lightness": 19
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#fefefe"
}, {
"lightness": 10
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#fefefe"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}],
center: new google.maps.LatLng(lat, long) //please add your location here
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
//icon: 'images/locating.png', if u want custom
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment