├── cftp_map_widget.js
├── cftp_map_widget.php
├── cftp_map_widget_admin.js
├── composer.json
├── plugin.php
├── readme.md
└── screenshot.png


/cftp_map_widget.js:
--------------------------------------------------------------------------------
 1 | jQuery(document).ready(function() {
 2 | 	jQuery('.cftp_map_widget_container').each( function ( index ) {
 3 | 		var el = jQuery( this );
 4 | 		var mlat = el.data('lat');
 5 | 		var mlong = el.data('long');
 6 | 		var zoom = el.data('zoom');
 7 | 		var latlng = new google.maps.LatLng( mlat, mlong );
 8 | 		var mapOptions = {
 9 | 			center: latlng,
10 | 			zoom: zoom,
11 | 			zoomControl: true,
12 | 			panControl: false
13 | 		};
14 | 		var map = new google.maps.Map( this, mapOptions );
15 | 
16 | 		var mmarker = el.data( 'marker' );
17 | 		if ( mmarker == true ) {
18 | 			var marker = new google.maps.Marker( {
19 | 				position: latlng,
20 | 				map: map
21 | 			});
22 | 		}
23 | 	});
24 | });


--------------------------------------------------------------------------------
/cftp_map_widget.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | 
  4 | class cftp_map_widget extends WP_Widget {
  5 | 	public function __construct() {
  6 | 		$widget_ops = array( 'description' => __('Embed a google map') );
  7 | 		WP_Widget::__construct( 'cftp_map_widget_', __('Map Widget'), $widget_ops );
  8 | 	}
  9 | 
 10 | 	public function widget( $args, $instance ) {
 11 | 		$options = get_option( 'cftp_gmap_options' );
 12 | 		wp_enqueue_script( 'google_map_api', 'https://maps.googleapis.com/maps/api/js');//?key='.$options['api_key'] );
 13 | 		wp_enqueue_script( 'cftp_map_widget', plugin_dir_url( __FILE__ ).'cftp_map_widget.js', array( 'jquery' ) );
 14 | 		$title = apply_filters( 'widget_title', $instance['title'] );
 15 | 
 16 | 		$lat = 0;
 17 | 		if ( isset( $instance[ 'lat' ] ) ) {
 18 | 			$lat = $instance[ 'lat' ];
 19 | 		}
 20 | 		$long = 0;
 21 | 		if ( isset( $instance[ 'long' ] ) ) {
 22 | 			$long = $instance[ 'long' ];
 23 | 		}
 24 | 		$zoom = 10;
 25 | 		if ( isset( $instance[ 'zoom' ] ) ) {
 26 | 			$zoom = $instance[ 'zoom' ];
 27 | 		}
 28 | 
 29 | 		$marker = true;
 30 | 		if ( isset( $instance[ 'marker' ] ) ) {
 31 | 			$marker = $instance[ 'marker' ];
 32 | 		} else {
 33 | 			$marker = false;
 34 | 		}
 35 | 
 36 | 		echo $args['before_widget'];
 37 | 		if ( ! empty( $title ) ) {
 38 | 			echo $args['before_title'] . esc_html( $title ) . $args['after_title'];
 39 | 		}
 40 | 		?>
 41 | 		<style>.cftp_map_widget_container img { max-width:none;} </style>
 42 | 		<div style="width:100%; height:300px;" class="cftp_map_widget_container" data-lat="<?php echo esc_attr( $lat ); ?>" data-long="<?php echo esc_attr( $long ); ?>" data-zoom="<?php echo esc_attr( $zoom ); ?>" data-marker="<?php echo $marker == true ? 'true' : 'false'; ?>"></div>
 43 | 		<?php
 44 | 		echo $args['after_widget'];
 45 | 	}
 46 | 
 47 | 	public function form( $instance ) {
 48 | 		wp_enqueue_script( 'google_map_api', 'https://maps.googleapis.com/maps/api/js');//?key='.$options['api_key'] );
 49 | 		wp_enqueue_script( 'cftp_map_widget_admin', plugin_dir_url( __FILE__ ).'cftp_map_widget_admin.js', array( 'jquery' ) );
 50 | 		?>
 51 | 		<div class="cftp_map_widget_ui unprocessed">
 52 | 			<?php
 53 | 			$title = __( 'New title', 'text_domain' );
 54 | 			if ( isset( $instance[ 'title' ] ) ) {
 55 | 				$title = $instance[ 'title' ];
 56 | 			}
 57 | 			?>
 58 | 			<p>
 59 | 				<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Title:' ); ?></label>
 60 | 				<input class="widefat maptitle" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
 61 | 			</p>
 62 | 			<?php
 63 | 			$lat = 0;
 64 | 			if ( isset( $instance[ 'lat' ] ) ) {
 65 | 				$lat = $instance[ 'lat' ];
 66 | 			}
 67 | 			?>
 68 | 			<input class="widefat maplat" id="<?php echo esc_attr( $this->get_field_id( 'lat' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'lat' ) ); ?>" type="hidden" value="<?php echo esc_attr( $lat ); ?>" />
 69 | 			<?php
 70 | 			$long = 0;
 71 | 			if ( isset( $instance[ 'long' ] ) ) {
 72 | 				$long = $instance[ 'long' ];
 73 | 			}
 74 | 			?>
 75 | 			<input class="widefat maplong" id="<?php echo esc_attr( $this->get_field_id( 'long' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'long' ) ); ?>" type="hidden" value="<?php echo esc_attr( $long ); ?>" />
 76 | 			<?php
 77 | 
 78 | 			$zoom = 10;
 79 | 			if ( isset( $instance[ 'zoom' ] ) ) {
 80 | 				$zoom = $instance[ 'zoom' ];
 81 | 			}
 82 | 			?>
 83 | 			<input class="widefat mapzoom" id="<?php echo esc_attr( $this->get_field_id( 'zoom' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'zoom' ) ); ?>" type="hidden" value="<?php echo esc_attr( $zoom ); ?>" />
 84 | 			<?php
 85 | 			$marker = 'on';
 86 | 			if ( isset( $instance[ 'marker' ] ) ) {
 87 | 				$marker = $instance[ 'marker' ];
 88 | 			} else {
 89 | 				$marker = '';
 90 | 			}
 91 | 			?>
 92 | 			<p>
 93 | 				<label for="<?php echo esc_attr( $this->get_field_id( 'marker' ) ); ?>"><?php _e( 'Show Marker:' ); ?></label>
 94 | 				<input id="<?php echo esc_attr( $this->get_field_id( 'marker' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'marker' ) ); ?>" type="checkbox" <?php checked( $marker, 'on' ); ?> />
 95 | 			</p>
 96 | 			<div class="geocoding">
 97 | 				<label for="<?php echo esc_attr( $this->get_field_id( 'geocoder' ) ); ?>">Search for a Location, or enter a position ( Latitude, Longitude )</label>
 98 | 				<input id="<?php echo esc_attr( $this->get_field_id( 'geocoder' ) ); ?>" type="text" class="geocoderinput widefat"/>
 99 | 				<div class="geocoder_results">
100 | 				</div>
101 | 			</div>
102 | 
103 | 			<style>.cftp_map_widget_container img { max-width:none;} .geocoder_results { border: 1px solid #eee;} .geocoder_results a { cursor: pointer; display:block; padding:5px; }  </style>
104 | 			<div style=" margin-bottom:1em; width: 400px; height:400px;" class="cftp_map_widget_container"></div>
105 | 		</div>
106 | 		<?php
107 | 	}
108 | 
109 | 	public function update( $new_instance, $old_instance ) {
110 | 		$fields = array(
111 | 			'title',
112 | 			'lat',
113 | 			'long',
114 | 			'zoom',
115 | 			'marker'
116 | 		);
117 | 		$instance = array();
118 | 		foreach ( $fields as $field ) {
119 | 			$instance[$field] = $new_instance[$field];
120 | 		}
121 | 		return $instance;
122 | 	}
123 | }


--------------------------------------------------------------------------------
/cftp_map_widget_admin.js:
--------------------------------------------------------------------------------
  1 | function MapWidgets() {
  2 | 
  3 | 	this.widgets = [];
  4 | }
  5 | 
  6 | MapWidgets.prototype.init = function() {
  7 | 	// kick things off
  8 | 	jQuery(document.body).bind('click.widgets-toggle', jQuery.proxy( this.initMaps, this ));
  9 | 	jQuery( document ).ajaxStop( jQuery.proxy( this.initMaps, this ) );
 10 | }
 11 | 
 12 | MapWidgets.prototype.initMaps = function( array ) {
 13 | 	var found = jQuery( '#widgets-right .cftp_map_widget_ui.unprocessed');
 14 | 	var new_widgets = found.map( function( index, domElement ) {
 15 | 		var m = new MapWidget( domElement );
 16 | 		return m;
 17 | 	}).get();
 18 | 	for ( var i = 0; i < new_widgets.length; i++ ) {
 19 | 		var m = new_widgets[i];
 20 | 		this.widgets.push( m );
 21 | 	}
 22 | }
 23 | 
 24 | function MapWidget( element ) {
 25 | 	this.shown = false;
 26 | 	var e = jQuery( element );
 27 | 	e.removeClass('unprocessed');
 28 | 	var titleel = e.parent().parent().parent().parent().children( '.widget-top' ).first();
 29 | 	this.parent = e.parent();
 30 | 	this.element = element;
 31 | 	this.jqelement = e;
 32 | 	this.zoomInput = this.jqelement.find('.mapzoom').first();
 33 | 	this.latInput = this.jqelement.find('.maplat').first();
 34 | 	this.longInput = this.jqelement.find('.maplong').first();
 35 | 	var mdiv = this.jqelement.find('.cftp_map_widget_container').first();
 36 | 	this.mapDiv = mdiv;
 37 | 
 38 | 	if ( this.mapDiv.is(':visible') ) {
 39 | 		this.setupMap();
 40 | 	}
 41 | 	var geoInput = e.find('.geocoderinput');
 42 | 	var geoResults = e.find('.geocoder_results');
 43 | 	this.geoInput = geoInput;
 44 | 	this.geoResults = geoResults;
 45 | 
 46 | 	this.idle = true;
 47 | 
 48 | 	geoInput.on( 'change', jQuery.proxy( this.geocoder_changed, this ) );
 49 | 	geoInput.on( 'keyup', jQuery.proxy( this.geocoder_changed, this ) );
 50 | 
 51 | 	titleel.on( 'click', jQuery.proxy( this.setupMap, this ) );
 52 | }
 53 | 
 54 | MapWidget.prototype.setupMap = function ( ) {
 55 | 
 56 | 	setTimeout( jQuery.proxy( function() {
 57 | 		if ( this.shown == true ) {
 58 | 			this.resizeMap();
 59 | 			return;
 60 | 		}
 61 | 		this.idle = false;
 62 | 		this.shown = true;
 63 | 		var mlat = this.latInput.val();
 64 | 		var mlong = this.longInput.val();
 65 | 		var zoom = this.getZoom();
 66 | 		var latlng = new google.maps.LatLng( mlat, mlong );
 67 | 		var mapOptions = {
 68 | 			center: latlng,
 69 | 			zoom: Number( zoom ),
 70 | 			disableDefaultUI: true,
 71 | 			zoomControl: true,
 72 | 			panControl: false
 73 | 		};
 74 | 		this.map = new google.maps.Map( this.mapDiv.get(0), mapOptions );
 75 | 		var mmarker = true;
 76 | 		if ( mmarker == true ) {
 77 | 			var marker = new google.maps.Marker( {
 78 | 				position: latlng,
 79 | 				map: this.map
 80 | 			});
 81 | 			this.marker = marker;
 82 | 			google.maps.event.addListener( this.map, 'center_changed', jQuery.proxy( this.center_changed, this ) );
 83 | 			google.maps.event.addListener( this.map, 'idle', jQuery.proxy( function () {
 84 | 				this.idle = true;
 85 | 			}, this ) );
 86 | 			google.maps.event.addListener( this.map, 'dragend', jQuery.proxy( this.dragend, this ) );
 87 | 			google.maps.event.addListener( this.map, 'zoom_changed', jQuery.proxy( this.zoom_changed, this ) );
 88 | 		}
 89 | 
 90 | 	}, this ), 400 );
 91 | 
 92 | }
 93 | 
 94 | 
 95 | MapWidget.prototype.resizeMap = function ( event ) {
 96 | 	google.maps.event.trigger( this.map, 'resize' );
 97 | 	this.map.setZoom( this.map.getZoom() );
 98 | }
 99 | 
100 | MapWidget.prototype.geocoder_changed = function ( event ) {
101 | 	var search = this.geoInput.val();
102 | 	var geocoder = new google.maps.Geocoder();
103 | 
104 | 	//search is a string, input by user
105 | 	geocoder.geocode({
106 | 		'address' : search
107 | 	}, jQuery.proxy( function( results, status ) {
108 | 		var search2 = this.geoInput.val();
109 | 		if ( search2 == search ) {
110 | 			var func = jQuery.proxy( this.geocoder_results, this );
111 | 			func( results, status );
112 | 		} else {
113 | 			//console.log( search2 + ' != ' + search );
114 | 		}
115 | 	}, this ) );
116 | }
117 | 
118 | MapWidget.prototype.geocoder_results = function ( results, status ) {
119 | 	var geoResults = this.geoResults;
120 | 	geoResults.empty();
121 | 	if ( ( status == "ZERO_RESULTS" ) || ( results == null ) ) {
122 | 		geoResults.append('<p>None Found</p>');
123 | 	} else {
124 | 		results = results.slice( 0, 6 );
125 | 		results.forEach( jQuery.proxy( this.processGeoCoderResult, this ) );
126 | 	}
127 | }
128 | 
129 | MapWidget.prototype.processGeoCoderResult = function ( result ) {
130 | 	var pos = result.geometry.location;
131 | 	var el = jQuery( '<a></a>').text( result.formatted_address );
132 | 	el.data( 'lat', pos.lat() );
133 | 	el.data( 'lng', pos.lng() );
134 | 	el.click( jQuery.proxy( this.onGeoCoderResultClick, this ) );
135 | 	this.geoResults.append( el );
136 | }
137 | 
138 | MapWidget.prototype.onGeoCoderResultClick = function ( event ) {
139 | 	if ( this.idle == false ) {
140 | 		return;
141 | 	}
142 | 	var target = event.target || event.srcElement;
143 | 	target = jQuery( target );
144 | 	var lat = target.data( 'lat' );
145 | 	var lng = target.data( 'lng' );
146 | 
147 | 	this.setPosition( lat, lng );
148 | }
149 | 
150 | MapWidget.prototype.setPosition = function ( lat, lng ) {
151 | 	this.idle = false;
152 | 	var position = new google.maps.LatLng( lat, lng );
153 | 	this.marker.setMap( null );
154 | 	this.setMarkerPosition( position );
155 | 	this.map.panTo( position );
156 | 	this.marker.setMap( this.map );
157 | 	this.resizeMap();
158 | }
159 | 
160 | MapWidget.prototype.setMarkerPosition = function ( position ) {
161 | 	this.marker.setPosition( position );
162 | }
163 | 
164 | MapWidget.prototype.center_changed = function () {
165 | 	if ( this.idle == false ) {
166 | 		return;
167 | 	}
168 | 	var center = this.map.getCenter();
169 | 	this.latInput.val( center.lat() );
170 | 	this.longInput.val( center.lng() );
171 | }
172 | 
173 | MapWidget.prototype.dragend = function () {
174 | 	if ( this.idle == false ) {
175 | 		return;
176 | 	}
177 | 	var center = this.map.getCenter();
178 | 	this.setMarkerPosition( center );
179 | }
180 | 
181 | MapWidget.prototype.zoom_changed = function () {
182 | 	if ( this.idle == false ) {
183 | 		return;
184 | 	}
185 | 	var zoom = this.map.getZoom();
186 | 	this.zoomInput.val( zoom );
187 | }
188 | 
189 | MapWidget.prototype.getZoom = function () {
190 | 	var z = this.zoomInput.val();
191 | 	return z;
192 | }
193 | 
194 | 
195 | jQuery(document).ready(function() {
196 | 	var mw = new MapWidgets();
197 | 	mw.init();
198 | });
199 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "cftp/map-widget",
 3 | 	"description": "A widget for embedding google maps",
 4 | 	"license": "GPL-2.0+",
 5 | 	"type": "wordpress-plugin",
 6 | 	"authors": [
 7 | 		{
 8 | 			"name": "Tom J Nowell",
 9 | 			"email": "contact@tomjn.com",
10 | 			"homepage": "http://tomjn.com"
11 | 		},
12 | 		{
13 | 			"name"    : "Code For The People",
14 | 			"homepage": "http://codeforthepeople.com/"
15 | 		}
16 | 	],
17 | 	"require": {
18 | 		"composer/installers": "~1.0"
19 | 	}
20 | }
21 | 


--------------------------------------------------------------------------------
/plugin.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /*
 3 | Plugin Name: Map Widget
 4 | Description: Google Map Widget
 5 | Author: Tom J Nowell, Code For The People, Automattic
 6 | Version: 1.1
 7 | Author URI: http://codeforthepeople.com/
 8 | License: GPLv2 or later
 9 | License URI: http://www.gnu.org/licenses/gpl-2.0.html
10 | */
11 | 
12 | require_once( 'cftp_map_widget.php' );
13 | 
14 | add_action( 'widgets_init', function() {
15 | 	register_widget( 'cftp_map_widget' );
16 | } );


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Map Widget
2 | 
3 | This plugin adds a widget that embeds a Google Map. Search for a location or position the map manually. Built by Code For The People and now an Automattic plugin
4 | 
5 | ![](screenshot.png)
6 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Automattic/Map-Widget/ec59f6f1c5b88883e18f88c67bb2138ce28f83b0/screenshot.png


--------------------------------------------------------------------------------