├── FieldtypeMapMarker.module
├── InputfieldMapMarker.css
├── InputfieldMapMarker.js
├── InputfieldMapMarker.module
├── MapMarker.php
├── MarkupGoogleMap.js
├── MarkupGoogleMap.module
└── README.md


/FieldtypeMapMarker.module:
--------------------------------------------------------------------------------
  1 | <?php namespace ProcessWire;
  2 | 
  3 | /**
  4 |  * ProcessWire Map Marker Fieldtype
  5 |  *
  6 |  * Holds an address and geocodes it to latitude and longitude via Google Maps
  7 |  * 
  8 |  * For documentation about the fields used in this class, please see:  
  9 |  * /wire/core/Fieldtype.php
 10 |  * 
 11 |  * ProcessWire 3.x 
 12 |  * Copyright (C) 2023 by Ryan Cramer 
 13 |  * Licensed under MPL 2.0
 14 |  * 
 15 |  * https://processwire.com
 16 |  *
 17 |  * @todo implement a getMatchQuery method and support LIKE with address. 
 18 |  * 
 19 |  * @property string $googleApiKey
 20 |  *
 21 |  */
 22 | 
 23 | class FieldtypeMapMarker extends Fieldtype implements ConfigurableModule {
 24 | 
 25 | 	public static function getModuleInfo() {
 26 | 		return array(
 27 | 			'title' => 'Map Marker',
 28 | 			'version' => 300,
 29 | 			'summary' => 'Field that stores an address with latitude and longitude coordinates and has built-in geocoding capability with Google Maps API.',
 30 | 			'installs' => 'InputfieldMapMarker',
 31 | 			'icon' => 'map-marker', 
 32 | 		);
 33 | 	}
 34 | 
 35 | 	/**
 36 | 	 * Include our MapMarker class, which serves as the value for fields of type FieldtypeMapMarker
 37 | 	 *
 38 | 	 */
 39 | 	public function __construct() {	
 40 | 		parent::__construct();
 41 | 		require_once(dirname(__FILE__) . '/MapMarker.php'); 
 42 | 	}
 43 | 	
 44 | 	public function set($key, $value) {
 45 | 		/*
 46 | 		if($key === 'googleApiKey' && strpos($this->wire('config')->httpHost, 'localhost') !== false) {
 47 | 			// disable API key when in localhost environment
 48 | 			if($this->wire('page')->template == 'admin') $value = '';
 49 | 		}
 50 | 		*/
 51 | 		return parent::set($key, $value);
 52 | 	}
 53 | 	
 54 | 	public function getGoogleMapsURL() {
 55 | 		$url = 'https://maps.google.com/maps/api/js';
 56 | 		$key = $this->get('googleApiKey');
 57 | 		if($key) $url .= "?key=$key";
 58 | 		return $url;
 59 | 	}
 60 | 
 61 | 	/**
 62 | 	 * Return the Inputfield required by this Fieldtype
 63 | 	 * 
 64 | 	 * @param Page $page
 65 | 	 * @param Field $field
 66 | 	 * @return InputfieldMapMarker
 67 | 	 *
 68 | 	 */
 69 | 	public function getInputfield(Page $page, Field $field) {
 70 | 		/** @var InputfieldMapMarker $inputfield */
 71 | 		$inputfield = $this->wire()->modules->get('InputfieldMapMarker'); 
 72 | 		$inputfield->set('googleApiKey', $this->get('googleApiKey'));
 73 | 		return $inputfield; 
 74 | 	}
 75 | 
 76 | 	/**
 77 | 	 * Return all compatible Fieldtypes 
 78 | 	 * 
 79 | 	 * @param Field $field
 80 | 	 * @return null
 81 | 	 *
 82 | 	 */
 83 | 	public function ___getCompatibleFieldtypes(Field $field) {
 84 | 		// there are no other fieldtypes compatible with this one
 85 | 		return null;
 86 | 	}
 87 | 
 88 | 	/**
 89 | 	 * Sanitize value for runtime
 90 | 	 * 
 91 | 	 * @param Page $page
 92 | 	 * @param Field $field
 93 | 	 * @param MapMarker $value
 94 | 	 * @return MapMarker
 95 | 	 *
 96 | 	 */
 97 | 	public function sanitizeValue(Page $page, Field $field, $value) {
 98 | 
 99 | 		// if it's not a MapMarker, then just return a blank MapMarker
100 | 		if(!$value instanceof MapMarker) $value = $this->getBlankValue($page, $field); 
101 | 
102 | 		// if the address changed, tell the $page that this field changed
103 | 		if($value->isChanged('address')) $page->trackChange($field->name); 
104 | 
105 | 		return $value; 
106 | 	}
107 | 
108 | 	/**
109 | 	 * Get a blank value used by this fieldtype
110 | 	 * 
111 | 	 * @param Page $page
112 | 	 * @param Field $field
113 | 	 * @return MapMarker
114 | 	 *
115 | 	 */
116 | 	public function getBlankValue(Page $page, Field $field) {
117 | 		$value = new MapMarker(); 
118 | 		$this->wire($value);
119 | 		return $value;
120 | 	}
121 | 
122 | 	/**
123 | 	 * Given a raw value (value as stored in DB), return the value as it would appear in a Page object
124 | 	 *
125 | 	 * @param Page $page
126 | 	 * @param Field $field
127 | 	 * @param string|int|array $value
128 | 	 * @return MapMarker
129 | 	 *
130 | 	 */
131 | 	public function ___wakeupValue(Page $page, Field $field, $value) {
132 | 
133 | 		// get a blank MapMarker instance
134 | 		$marker = $this->getBlankValue($page, $field); 
135 | 
136 | 		if("$value[lat]" === "0") $value['lat'] = '';
137 | 		if("$value[lng]" === "0") $value['lng'] = '';
138 | 
139 | 		// populate the marker
140 | 		$marker->address = $value['data'];
141 | 		$marker->lat = $value['lat'];
142 | 		$marker->lng = $value['lng'];
143 | 		$marker->status = $value['status'];
144 | 		$marker->zoom = $value['zoom']; 
145 | 		$marker->setTrackChanges(true); 
146 | 
147 | 		return $marker; 
148 | 	}
149 | 
150 | 	/**
151 | 	 * Given an 'awake' value, as set by wakeupValue, convert the value back to a basic type for storage in DB. 
152 | 	 *              
153 | 	 * @param Page $page
154 | 	 * @param Field $field
155 | 	 * @param string|int|array|object $value
156 | 	 * @return array
157 | 	 * @throws WireException
158 | 	 *
159 | 	 */
160 | 	public function ___sleepValue(Page $page, Field $field, $value) {
161 | 
162 | 		$marker = $value;
163 | 
164 | 		if(!$marker instanceof MapMarker) {
165 | 			throw new WireException("Expecting an instance of MapMarker");
166 | 		}
167 | 
168 | 		// if the address was changed, then force it to geocode the new address
169 | 		if($marker->isChanged('address') && $marker->address && $marker->status != MapMarker::statusNoGeocode) {
170 | 			$marker->geocode();
171 | 		}
172 | 
173 | 		$sleepValue = array(
174 | 			'data' => $marker->address, 
175 | 			'lat' => strlen($marker->lat) ? $marker->lat : 0, 
176 | 			'lng' => strlen($marker->lng) ? $marker->lng : 0, 
177 | 			'status' => $marker->status,
178 | 			'zoom' => $marker->zoom
179 | 		);
180 | 
181 | 		return $sleepValue; 
182 | 	}
183 | 
184 | 
185 | 	/**
186 | 	 * Return the database schema in specified format
187 | 	 * 
188 | 	 * @param Field $field
189 | 	 * @return array
190 | 	 *
191 | 	 */
192 | 	public function getDatabaseSchema(Field $field) {
193 | 
194 | 		// get the default schema
195 | 		$schema = parent::getDatabaseSchema($field); 
196 | 
197 | 		$schema['data'] = "VARCHAR(255) NOT NULL DEFAULT ''"; 	// address (reusing the 'data' field from default schema)
198 | 		$schema['lat'] = "FLOAT(10,6) NOT NULL DEFAULT 0";	// latitude
199 | 		$schema['lng'] = "FLOAT(10,6) NOT NULL DEFAULT 0";	// longitude
200 | 		$schema['status'] = "TINYINT NOT NULL DEFAULT 0";	// geocode status
201 | 		$schema['zoom'] = "TINYINT NOT NULL DEFAULT 0";		// zoom level (schema v1)
202 | 
203 | 		$schema['keys']['latlng'] = "KEY latlng (lat, lng)";	// keep an index of lat/lng 
204 | 		$schema['keys']['data'] = 'FULLTEXT KEY `data` (`data`)';
205 | 		$schema['keys']['zoom'] = "KEY zoom (zoom)";
206 | 
207 | 		if($field->id) $this->updateDatabaseSchema($field, $schema); 
208 | 
209 | 		return $schema;
210 | 	}
211 | 
212 | 	/**
213 | 	 * Update the DB schema, if necessary
214 | 	 * 
215 | 	 * @param Field $field
216 | 	 * @param array $schema
217 | 	 *
218 | 	 */
219 | 	protected function updateDatabaseSchema(Field $field, array $schema) {
220 | 
221 | 		$requiredVersion = 1; 
222 | 		$schemaVersion = (int) $field->get('schemaVersion'); 
223 | 
224 | 		if($schemaVersion >= $requiredVersion) {
225 | 			// already up-to-date
226 | 			return;
227 | 		}
228 | 
229 | 		if($schemaVersion == 0) {
230 | 			// update schema to v1: add 'zoom' column	
231 | 			$schemaVersion = 1; 
232 | 			$database = $this->wire()->database;
233 | 			$table = $database->escapeTable($field->getTable());
234 | 			$query = $database->prepare("SHOW TABLES LIKE '$table'"); 
235 | 			$query->execute();
236 | 			$row = $query->fetch(\PDO::FETCH_NUM); 
237 | 			$query->closeCursor();
238 | 			if(!empty($row)) {
239 | 				$query = $database->prepare("SHOW COLUMNS FROM `$table` WHERE field='zoom'"); 
240 | 				$query->execute();
241 | 				if(!$query->rowCount()) try {
242 | 					$database->exec("ALTER TABLE `$table` ADD zoom $schema[zoom] AFTER status");
243 | 					$this->message("Added 'zoom' column to '$field->table'"); 
244 | 				} catch(\Exception $e) {
245 | 					$this->error($e->getMessage()); 
246 | 				}
247 | 			}
248 | 		}
249 | 
250 | 		$field->set('schemaVersion', $schemaVersion); 
251 | 		$field->save();
252 | 	}
253 | 
254 | 	/**
255 | 	 * Match values for PageFinder
256 | 	 * 
257 | 	 * @param PageFinderDatabaseQuerySelect|DatabaseQuerySelect $query
258 | 	 * @param string $table
259 | 	 * @param string $subfield
260 | 	 * @param string $operator
261 | 	 * @param string $value
262 | 	 * @return DatabaseQuerySelect
263 | 	 *
264 | 	 */
265 | 	public function getMatchQuery($query, $table, $subfield, $operator, $value) {
266 | 		if(!$subfield || $subfield == 'address') $subfield = 'data';
267 | 		if($subfield != 'data' || $this->wire()->database->isOperator($operator)) {
268 | 			// if dealing with something other than address, or operator is native to SQL,
269 | 			// then let Fieldtype::getMatchQuery handle it instead
270 | 			return parent::getMatchQuery($query, $table, $subfield, $operator, $value); 
271 | 		}
272 | 		// if we get here, then we're performing either %= (LIKE and variations) or *= (FULLTEXT and variations)
273 | 		$ft = new DatabaseQuerySelectFulltext($query);
274 | 		$ft->match($table, $subfield, $operator, $value);
275 | 		return $query;
276 | 	}
277 | 
278 | 	/**
279 | 	 * Module configuration
280 | 	 * 
281 | 	 * @param array $data
282 | 	 * @return InputfieldWrapper
283 | 	 * 
284 | 	 */
285 | 	public static function getModuleConfigInputfields(array $data) {
286 | 		$inputfields = new InputfieldWrapper();
287 | 		if(wire()->config->demo) $data['googleApiKey'] = 'Not shown in demo mode';
288 | 		/** @var InputfieldText $f */
289 | 		$f = wire()->modules->get('InputfieldText');
290 | 		$f->attr('name', 'googleApiKey'); 
291 | 		$f->label = __('Google Maps API Key'); 
292 | 		$f->icon = 'map';
293 | 		$f->description = sprintf(__('[Click here](%s) for instructions from Google on how to obtain an API key.'),
294 | 			'https://developers.google.com/maps/documentation/javascript/get-api-key');
295 | 		$f->attr('value', isset($data['googleApiKey']) ? $data['googleApiKey'] : '');
296 | 		$inputfields->add($f);
297 | 		return $inputfields;
298 | 	}
299 | }


--------------------------------------------------------------------------------
/InputfieldMapMarker.css:
--------------------------------------------------------------------------------
 1 | .InputfieldMapMarker input[type=number], 
 2 | .InputfieldMapMarker input[type=text] {
 3 | 	width: 99.5%; 
 4 | }
 5 | 
 6 | .InputfieldMapMarkerToggle span {
 7 | 	display: none; 
 8 | }
 9 | 
10 | .InputfieldMapMarkerAddress {
11 | 	float: left; 
12 | 	width: 70%; 
13 | 	padding-right: 2%; 
14 | }
15 | 
16 | .InputfieldMapMarkerToggle {
17 | 	float: left; 
18 | 	width: 28%; 
19 | }
20 | 
21 | .InputfieldMapMarkerLat,
22 | .InputfieldMapMarkerLng {
23 | 	width: 42%; 
24 | 	float: left; 
25 | 	padding-right: 2%; 
26 | }
27 | 
28 | .InputfieldMapMarkerZoom {
29 | 	float: left; 
30 | 	width: 10%; 
31 | }
32 | 
33 | .InputfieldMapMarker .notes {
34 | 	clear: both; 
35 | }
36 | 
37 | .InputfieldMapMarkerMap {
38 | 	width: 100%; 
39 | 	height: 300px; 
40 | 	clear: left;
41 | }
42 | 
43 | @media only screen and (min-width: 768px) {
44 | 
45 | 	.InputfieldMapMarkerAddress {
46 | 		width: 38%; 
47 | 		padding-right: 1%; 
48 | 	}
49 | 
50 | 	.InputfieldMapMarkerToggle {
51 | 		width: 2%; 
52 | 		padding-right: 0.5%; 
53 | 		position: relative;
54 | 	}
55 | 
56 | 	.InputfieldMapMarkerToggle strong {
57 | 		/* hide geocode label */
58 | 		display: none; 
59 | 	}
60 | 
61 | 	.InputfieldMapMarkerLat,
62 | 	.InputfieldMapMarkerLng {
63 | 		width: 23%; 
64 | 		padding-right: 1%; 
65 | 	}
66 | 
67 | 	.InputfieldMapMarkerZoom {
68 | 		float: left; 
69 | 		width: 9.5%; 
70 | 	}
71 | 
72 | }
73 | 
74 | 


--------------------------------------------------------------------------------
/InputfieldMapMarker.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Display a Google Map and pinpoint a location for InputfieldMapMarker
  3 |  *
  4 |  */
  5 | 
  6 | var InputfieldMapMarker = {
  7 | 
  8 | 	options: {
  9 | 		zoom: 12, // mats, previously 5
 10 | 		draggable: true, // +mats
 11 | 		center: null,
 12 | 		//key: config.InputfieldMapMarker.googleApiKey, 
 13 | 		mapTypeId: google.maps.MapTypeId.HYBRID,
 14 | 		scrollwheel: false,	
 15 | 		mapTypeControlOptions: {
 16 | 			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
 17 | 		},
 18 | 		scaleControl: false
 19 | 	},	
 20 | 
 21 | 	init: function(mapId, lat, lng, zoom, mapType) {
 22 | 
 23 | 		var options = InputfieldMapMarker.options; 
 24 | 
 25 | 		if(zoom < 1) zoom = 12; 
 26 | 		options.center = new google.maps.LatLng(lat, lng); 	
 27 | 		options.zoom = parseInt(zoom); 
 28 | 
 29 | 		if(mapType == 'SATELLITE') options.mapTypeId = google.maps.MapTypeId.SATELLITE; 
 30 | 			else if(mapType == 'ROADMAP') options.mapTypeId = google.maps.MapTypeId.ROADMAP; 
 31 | 
 32 | 		var map = new google.maps.Map(document.getElementById(mapId), options); 	
 33 | 
 34 | 		var marker = new google.maps.Marker({
 35 | 			position: options.center, 
 36 | 			map: map,
 37 | 			draggable: options.draggable	
 38 | 		}); 
 39 | 
 40 | 		var $map = $('#' + mapId); 
 41 | 		var $lat = $map.siblings(".InputfieldMapMarkerLat").find("input[type=text]");
 42 | 		var $lng = $map.siblings(".InputfieldMapMarkerLng").find("input[type=text]");
 43 | 		var $addr = $map.siblings(".InputfieldMapMarkerAddress").find("input[type=text]"); 
 44 | 		var $addrJS = $map.siblings(".InputfieldMapMarkerAddress").find("input[type=hidden]"); 
 45 | 		var $toggle = $map.siblings(".InputfieldMapMarkerToggle").find("input[type=checkbox]");
 46 | 		var $zoom = $map.siblings(".InputfieldMapMarkerZoom").find("input[type=number]");
 47 | 		var $notes = $map.siblings(".notes");
 48 | 
 49 | 		$lat.val(marker.getPosition().lat());
 50 | 		$lng.val(marker.getPosition().lng());
 51 | 		$zoom.val(map.getZoom()); 
 52 | 
 53 | 		google.maps.event.addListener(marker, 'dragend', function(event) {
 54 | 			var geocoder = new google.maps.Geocoder();
 55 | 			var position = this.getPosition();
 56 | 			$lat.val(position.lat());
 57 | 			$lng.val(position.lng());
 58 | 			if($toggle.is(":checked")) {
 59 | 				geocoder.geocode({ 'latLng': position }, function(results, status) {
 60 | 					if(status == google.maps.GeocoderStatus.OK && results[0]) {
 61 | 						$addr.val(results[0].formatted_address);	
 62 | 						$addrJS.val($addr.val()); 
 63 | 					}
 64 | 					$notes.text(status);
 65 | 				});
 66 | 			}
 67 | 		});
 68 | 
 69 | 		google.maps.event.addListener(map, 'zoom_changed', function() {
 70 | 			$zoom.val(map.getZoom()); 
 71 | 		}); 
 72 | 
 73 | 		$addr.blur(function() {
 74 | 			if(!$toggle.is(":checked")) return true;
 75 | 			var geocoder = new google.maps.Geocoder();
 76 | 			geocoder.geocode({ 'address': $(this).val()}, function(results, status) {
 77 | 				if(status == google.maps.GeocoderStatus.OK && results[0]) {
 78 | 					var position = results[0].geometry.location;
 79 | 					map.setCenter(position);
 80 | 					marker.setPosition(position);
 81 | 					$lat.val(position.lat());
 82 | 					$lng.val(position.lng());
 83 | 					$addrJS.val($addr.val()); 
 84 | 				}
 85 | 				$notes.text(status); 
 86 | 			});
 87 | 			return true;	
 88 | 		}); 
 89 | 
 90 | 		$zoom.change(function() {
 91 | 			map.setZoom(parseInt($(this).val())); 
 92 | 		}); 
 93 | 
 94 | 		$toggle.click(function() {
 95 | 			if($(this).is(":checked")) {
 96 | 				$notes.text('Geocode ON');
 97 | 				// google.maps.event.trigger(marker, 'dragend'); 
 98 | 				$addr.trigger('blur');
 99 | 			} else {
100 | 				$notes.text('Geocode OFF');
101 | 			}
102 | 			return true;
103 | 		});
104 | 
105 | 		// added by diogo to solve the problem of maps not rendering correctly in hidden elements
106 | 		// trigger a resize on the map when either the tab button or the toggle field bar are pressed
107 | 
108 | 		// get the tab element where this map is integrated
109 | 		var $map = $('#' + mapId); 
110 | 		var $tab = $('#_' + $map.closest('.InputfieldFieldsetTabOpen').attr('id'));
111 | 		// get the inputfield where this map is integrated and add the tab to the stack
112 | 		var $inputFields = $map.closest('.Inputfield').find('.InputfieldStateToggle').add($tab);
113 | 
114 | 		$inputFields.on('click',function(){
115 | 			// give it time to open
116 | 			window.setTimeout(function(){
117 | 				google.maps.event.trigger(map,'resize');
118 | 				map.setCenter(options.center); 
119 | 			}, 200);
120 | 		});
121 | 		
122 | 	}
123 | };
124 | 
125 | $(document).ready(function() {
126 | 	$(".InputfieldMapMarkerMap").each(function() {
127 | 		var $t = $(this);
128 | 		InputfieldMapMarker.init($t.attr('id'), $t.attr('data-lat'), $t.attr('data-lng'), $t.attr('data-zoom'), $t.attr('data-type')); 
129 | 	}); 
130 | }); 
131 | 


--------------------------------------------------------------------------------
/InputfieldMapMarker.module:
--------------------------------------------------------------------------------
  1 | <?php namespace ProcessWire;
  2 | 
  3 | /**
  4 |  * ProcessWire Map Marker Inputfield
  5 |  *
  6 |  * Provides the admin control panel inputs for FieldtypeMapMarker
  7 |  * 
  8 |  * ProcessWire 3.x 
  9 |  * Copyright (C) 2023 by Ryan Cramer 
 10 |  * Licensed under MPL 2.0
 11 |  * 
 12 |  * https://processwire.com
 13 |  * 
 14 |  * @property string $defaultAddr
 15 |  * @property int $defaultZoom
 16 |  * @property string $defaultType
 17 |  * @property string $defaultLat
 18 |  * @property string $defaultLng
 19 |  * @property int $height
 20 |  * @property string $googleApiKey
 21 |  *
 22 |  */
 23 | 
 24 | class InputfieldMapMarker extends Inputfield {
 25 | 
 26 | 	public static function getModuleInfo() {
 27 | 		return array(
 28 | 			'title' => 'Map Marker',
 29 | 			'version' => 300,
 30 | 			'summary' => "Provides input for the MapMarker Fieldtype",
 31 | 			'requires' => 'FieldtypeMapMarker',
 32 | 			'icon' => 'map-marker', 
 33 | 		);
 34 | 	}
 35 | 	
 36 | 	const defaultAddr = 'Castaway Cay';
 37 | 
 38 | 	/**
 39 | 	 * Just in case this Inputfield is being used separately from FieldtypeMapmarker, we include the MapMarker class
 40 | 	 *
 41 | 	 */
 42 | 	public function __construct() {
 43 | 		require_once(dirname(__FILE__) . '/MapMarker.php'); 
 44 | 		$this->set('defaultAddr', self::defaultAddr); 
 45 | 		$this->set('defaultZoom', 12); 
 46 | 		$this->set('defaultType', 'HYBRID');  
 47 | 		$this->set('defaultLat', ''); 
 48 | 		$this->set('defaultLng', ''); 
 49 | 		$this->set('height', 300); 
 50 | 		$this->set('googleApiKey', '');
 51 | 		parent::__construct();
 52 | 	}
 53 | 
 54 | 	/**
 55 | 	 * Set an attribute to this Inputfield
 56 | 	 *
 57 | 	 * In this case, we just capture the 'value' attribute and make sure it's something valid
 58 | 	 * 
 59 | 	 * @param string $key
 60 | 	 * @param mixed $value
 61 | 	 * @return $this
 62 | 	 * @throws WireException
 63 |  	 *
 64 | 	 */
 65 | 	public function setAttribute($key, $value) {
 66 | 
 67 | 		if($key == 'value' && !$value instanceof MapMarker && !is_null($value)) {
 68 | 			throw new WireException("This input only accepts a MapMarker for its value"); 
 69 | 		}
 70 | 
 71 | 		return parent::setAttribute($key, $value); 
 72 | 	}
 73 | 
 74 | 	/**
 75 | 	 * Is the value empty? 
 76 | 	 * 
 77 | 	 * @return bool
 78 | 	 * 
 79 | 	 */
 80 | 	public function isEmpty() {
 81 | 		return (!$this->value || ((float) $this->value->lat) === 0.0); 
 82 | 	}
 83 | 
 84 | 	/**
 85 | 	 * @return FieldtypeMapMarker
 86 | 	 * 
 87 | 	 */
 88 | 	public function fieldtype() {
 89 | 		/** @var FieldtypeMapMarker $fieldtype */
 90 | 		$fieldtype = $this->wire()->modules->get('FieldtypeMapMarker');
 91 | 		return $fieldtype;
 92 | 	}
 93 | 	
 94 | 	public function renderReady(Inputfield $parent = null, $renderValueMode = false) {
 95 | 		/*
 96 | 		$url = 'https://maps.google.com/maps/api/js';
 97 | 		$key = $this->get('googleApiKey');
 98 | 		if($key) $url .= "?key=$key";
 99 | 		*/
100 | 		$url = $this->fieldtype()->getGoogleMapsURL();
101 | 		$this->wire()->config->scripts->add($url);
102 | 		return parent::renderReady($parent, $renderValueMode);
103 | 	}
104 | 
105 | 	/**
106 | 	 * Render the markup needed to draw the Inputfield
107 | 	 * 
108 | 	 * @return string
109 | 	 *
110 | 	 */
111 | 	public function ___render() {
112 | 	
113 | 		$sanitizer = $this->wire()->sanitizer;
114 | 		$adminTheme = $this->wire()->adminTheme;
115 | 
116 | 		$name = $this->attr('name'); 
117 | 		$id = $this->attr('id'); 
118 | 		$marker = $this->attr('value'); 
119 | 		
120 | 		if($marker->lat == 0.0) $marker->lat = $this->defaultLat; 
121 | 		if($marker->lng == 0.0) $marker->lng = $this->defaultLng; 
122 | 		if(!$marker->zoom) $marker->zoom = $this->defaultZoom;
123 | 		
124 | 		$address = $sanitizer->entities($marker->address);
125 | 		$toggleChecked = $marker->status != MapMarker::statusNoGeocode ? " checked='checked'" : '';
126 | 		$status = $marker->status == MapMarker::statusNoGeocode ? 0 : $marker->status; 
127 | 		$mapType = $this->defaultType; 
128 | 		$height = $this->height ? (int) $this->height : 300;
129 | 		$classes = array('input' => '', 'checkbox' => '');
130 | 	
131 | 		if($adminTheme && method_exists($adminTheme, 'getClass')) {
132 | 			foreach(array_keys($classes) as $key) {
133 | 				$classes[$key] = $adminTheme->getClass($key);
134 | 			}
135 | 		}
136 | 		
137 | 		$labels = array(
138 | 			'addr' => $this->_('Address'), 
139 | 			'lat' => $this->_('Latitude'),
140 | 			'lng' => $this->_('Longitude'),
141 | 			'geo' => $this->_('Geocode?'),
142 | 			'zoom' => $this->_('Zoom')
143 | 		);
144 | 		
145 | 		foreach($labels as $key => $label) {
146 | 			$labels[$key] = $sanitizer->entities1($label);
147 | 		}
148 | 
149 | 		$out = <<< _OUT
150 | 
151 | 		<span></span>
152 | 
153 | 		<p class='InputfieldMapMarkerAddress'>
154 | 			<label>
155 | 				<strong>$labels[addr]</strong>
156 | 				<br />
157 | 				<input type='text' id='{$id}' name='{$name}' value='{$address}' class='$classes[input]' /><br />
158 | 			</label>
159 | 			<input type='hidden' id='_{$name}_js_geocode_address' name='_{$name}_js_geocode_address' value='' />
160 | 		</p>
161 | 
162 | 		<p class='InputfieldMapMarkerToggle'>
163 | 			<label>
164 | 				<br />
165 | 				<input title='Geocode ON/OFF' type='checkbox' class='$classes[checkbox]' name='_{$name}_status' id='_{$name}_toggle' value='$status'$toggleChecked />
166 | 				<strong>$labels[geo]</strong>
167 | 			</label>
168 | 		</p>
169 | 
170 | 		<p class='InputfieldMapMarkerLat'>
171 | 			<label>
172 | 				<strong>$labels[lat]</strong><br />
173 | 				<input type='text' id='_{$id}_lat' name='_{$name}_lat' value='{$marker->lat}' class='$classes[input]' />
174 | 			</label>
175 | 		</p>
176 | 
177 | 		<p class='InputfieldMapMarkerLng'>
178 | 			<label>
179 | 				<strong>$labels[lng]</strong><br />
180 | 				<input type='text' id='_{$id}_lng' name='_{$name}_lng' value='{$marker->lng}' class='$classes[input]' />
181 | 			</label>
182 | 		</p>
183 | 
184 | 		<p class='InputfieldMapMarkerZoom'>
185 | 			<label>
186 | 				<strong>$labels[zoom]</strong><br />
187 | 				<input type='number' min='0' id='_{$id}_zoom' name='_{$name}_zoom' value='{$marker->zoom}' class='$classes[input]' />
188 | 			</label>
189 | 		</p>
190 | 
191 | 
192 | _OUT;
193 | 
194 | 		$out .= 
195 | 			"<div class='InputfieldMapMarkerMap' " . 
196 | 				"id='_{$id}_map' " . 
197 | 				"style='height: {$height}px' " . 
198 | 				"data-lat='$marker->lat' " . 
199 | 				"data-lng='$marker->lng' " . 
200 | 				"data-zoom='$marker->zoom' " . 
201 | 				"data-type='$mapType'>" . 
202 | 			"</div>";
203 | 
204 | 		$this->notes = $marker->statusString; 
205 | 		
206 | 		if(!$this->get('googleApiKey')) {
207 | 			$config = $this->wire()->config;
208 | 			$msg = $sanitizer->entities1($this->_('Please setup a Google Maps API key in the FieldtypeMapMarker module settings'));
209 | 			if($this->wire()->user->isSuperuser()) {
210 | 				$link = "<a href='{$config->urls->admin}module/edit?name=FieldtypeMapMarker'>";
211 | 				$msg = "$link$msg</a>";
212 | 				$this->warning($msg, Notice::allowMarkup);
213 | 			} else {
214 | 				$this->warning($msg);
215 | 			}
216 | 		}
217 | 
218 | 		return $out; 
219 | 	}
220 | 
221 | 	/**
222 | 	 * Process the input after a form submission
223 | 	 * 
224 | 	 * @param WireInputData $input
225 | 	 * @return $this
226 | 	 *
227 | 	 */
228 | 	public function ___processInput(WireInputData $input) {
229 | 
230 | 		$name = $this->attr('name'); 
231 | 		$marker = $this->attr('value');
232 | 
233 | 		if(!isset($input->$name)) {
234 | 			return $this;
235 | 		}
236 | 
237 | 		if($input->$name == $this->defaultAddr) {
238 | 			$marker->set('address', ''); 
239 | 		} else {
240 | 			$marker->set('address', $input->$name);
241 | 		}
242 | 
243 | 		$lat = (float) $input["_{$name}_lat"];
244 | 		$lng = (float) $input["_{$name}_lng"];
245 | 		$defaultLat = (float) $this->defaultLat;
246 | 		$defaultLng = (float) $this->defaultLng;
247 | 		$precision = 4; 
248 | 		
249 | 		if(	((string) round($lat, $precision)) != ((string) round($defaultLat, $precision)) ||
250 | 			((string) round($lng, $precision)) != ((string) round($defaultLng, $precision))) {
251 | 			$marker->set('lat', $lat); 
252 | 			$marker->set('lng', $lng); 
253 | 		} else {
254 | 			// $this->message("Kept lat/lng at unset value", Notice::debug); 
255 | 		}
256 | 
257 | 		$zoom = $input["_{$name}_zoom"]; 
258 | 		if($zoom > -1 && $zoom < 30) $marker->zoom = (int) $zoom; 
259 | 	
260 | 		$status = $input["_{$name}_status"]; 
261 | 		if(is_null($status)) {
262 | 			$marker->set('status', MapMarker::statusNoGeocode); // disable geocode
263 | 		} else {
264 | 			$marker->set('status', (int) $status);
265 | 		}
266 | 
267 | 		// if the address changed, then redo the geocoding.
268 | 		// while we do this in the Fieldtype, we also do it here in case this Inputfield is used on it's own.
269 | 		// the MapMarker class checks to make sure it doesn't do the same geocode twice. 
270 | 		if($marker->isChanged('address') && $marker->address && $marker->status != MapMarker::statusNoGeocode) {
271 | 			// double check that the address wasn't already populated by the JS geocoder
272 | 			// this prevents user-dragged markers that don't geocode to an exact location from getting 
273 | 			// unintentionally moved by the PHP-side geocoder
274 | 			if($input["_{$name}_js_geocode_address"] == $marker->address) {
275 | 				// prevent the geocoder from running in the fieldtype
276 | 				$marker->skipGeocode = true; 
277 | 				$this->message('Skipping geocode (already done by JS geocoder)', Notice::debug); 
278 | 			} else {
279 | 				$marker->geocode();
280 | 			}
281 | 		}
282 | 
283 | 		return $this;
284 | 	}
285 | 
286 | 	/**
287 | 	 * @return InputfieldWrapper
288 | 	 * 
289 | 	 */
290 | 	public function ___getConfigInputfields() {
291 | 		$modules = $this->wire()->modules;
292 | 		$inputfields = parent::___getConfigInputfields();
293 | 
294 | 		/** @var InputfieldText $field */
295 | 		$field = $modules->get('InputfieldText'); 
296 | 		$field->attr('name', 'defaultAddr'); 
297 | 		$field->label = $this->_('Default Address'); 
298 | 		$field->description = $this->_('This will be geocoded to become the starting point of the map.'); 
299 | 		$field->attr('value', $this->defaultAddr); 
300 | 		$field->notes = $this->_('When modifying the default address, please make the Latitude and Longitude fields below blank, which will force the system to geocode your new address.');  
301 | 		$inputfields->add($field); 
302 | 
303 | 		if(!$this->defaultLat && !$this->defaultLng) {
304 | 			$m = new MapMarker();
305 | 			$m->address = $this->defaultAddr; 
306 | 			$status = $m->geocode();	
307 | 			if($status > 0) {
308 | 				$this->defaultLat = $m->lat; 
309 | 				$this->defaultLng = $m->lng; 
310 | 				$this->message($this->_('Geocoded your default address. Please hit save once again to commit the new default latitude and longitude.')); 
311 | 			}
312 | 		}
313 | 
314 | 		/** @var InputfieldText $field */
315 | 		$field = $modules->get('InputfieldText'); 
316 | 		$field->attr('name', 'defaultLat'); 
317 | 		$field->label = $this->_('Default Latitude'); 
318 | 		$field->attr('value', $this->defaultLat); 
319 | 		$field->columnWidth = 50; 
320 | 		$inputfields->add($field);
321 | 
322 | 		/** @var InputfieldText $field */
323 | 		$field = $modules->get('InputfieldText'); 
324 | 		$field->attr('name', 'defaultLng'); 
325 | 		$field->label = $this->_('Default Longitude'); 
326 | 		$field->attr('value', $this->defaultLng); 
327 | 		$field->columnWidth = 50; 
328 | 		$inputfields->add($field);
329 | 
330 | 		/** @var InputfieldRadios $field */
331 | 		$field = $modules->get('InputfieldRadios'); 
332 | 		$field->attr('name', 'defaultType'); 
333 | 		$field->label = $this->_('Default Map Type'); 
334 | 		$field->addOption('HYBRID', $this->_('Hybrid')); 
335 | 		$field->addOption('ROADMAP', $this->_('Road Map')); 
336 | 		$field->addOption('SATELLITE', $this->_('Satellite')); 
337 | 		$field->attr('value', $this->defaultType); 
338 | 		$field->optionColumns = 1; 
339 | 		$field->columnWidth = 50; 
340 | 		$inputfields->add($field);
341 | 
342 | 		/** @var InputfieldInteger $field */
343 | 		$field = $modules->get('InputfieldInteger'); 	
344 | 		$field->attr('name', 'height'); 
345 | 		$field->label = $this->_('Map Height (in pixels)'); 
346 | 		$field->attr('value', $this->height); 
347 | 		$field->attr('type', 'number'); 
348 | 		$field->columnWidth = 50; 
349 | 		$inputfields->add($field);
350 | 
351 | 		/** @var InputfieldInteger $field */
352 | 		$field = $modules->get('InputfieldInteger'); 	
353 | 		$field->attr('name', 'defaultZoom'); 
354 | 		$field->label = $this->_('Default Zoom'); 
355 | 		$field->description = $this->_('Enter a value between 1 and 23. The highest zoom level is typically somewhere between 19-23, depending on the location being zoomed and how much data Google has for the location.');  // Zoom level description
356 | 		$field->attr('value', $this->defaultZoom); 
357 | 		$field->attr('type', 'number'); 
358 | 		$inputfields->add($field);
359 | 
360 | 		/** @var InputfieldMarkup $field */
361 | 		$field = $modules->get('InputfieldMarkup'); 
362 | 		$field->label = $this->_('API Notes'); 
363 | 		$field->description = $this->_('You can access individual values from this field using the following from your template files:');
364 | 		$field->value = 
365 | 			"<pre>" .
366 | 			"\$page->{$this->name}->address\n" . 
367 | 			"\$page->{$this->name}->lat\n" . 
368 | 			"\$page->{$this->name}->lng\n" . 
369 | 			"\$page->{$this->name}->zoom" . 
370 | 			"</pre>";
371 | 
372 | 		$inputfields->add($field); 
373 | 
374 | 		return $inputfields; 	
375 | 	}
376 | 
377 | }


--------------------------------------------------------------------------------
/MapMarker.php:
--------------------------------------------------------------------------------
  1 | <?php namespace ProcessWire;
  2 | 
  3 | /**
  4 |  * Class to hold an address and geocode it to latitude/longitude
  5 |  * 
  6 |  * @property string $lat
  7 |  * @property string $lng
  8 |  * @property string $address
  9 |  * @property int $status
 10 |  * @property int $zoom
 11 |  * @property bool $skipGeocode
 12 |  * @property string $statusString
 13 |  *
 14 |  */
 15 | class MapMarker extends WireData {
 16 | 
 17 | 	const statusNoGeocode = -100;
 18 | 
 19 | 	protected $geocodeStatuses = array(
 20 | 		0 => 'N/A',
 21 | 		1 => 'OK',
 22 | 		2 => 'OK_ROOFTOP', 
 23 | 		3 => 'OK_RANGE_INTERPOLATED',
 24 | 		4 => 'OK_GEOMETRIC_CENTER',
 25 | 		5 => 'OK_APPROXIMATE',
 26 | 
 27 | 		-1 => 'UNKNOWN',
 28 | 		-2 => 'ZERO_RESULTS',
 29 | 		-3 => 'OVER_QUERY_LIMIT',
 30 | 		-4 => 'REQUEST_DENIED',
 31 | 		-5 => 'INVALID_REQUEST',
 32 | 
 33 | 		-100 => 'Geocode OFF', // RCD
 34 | 	);
 35 | 
 36 | 	protected $geocodedAddress = '';
 37 | 
 38 | 	public function __construct() {
 39 | 		parent::__construct();
 40 | 		$this->set('lat', '');
 41 | 		$this->set('lng', '');
 42 | 		$this->set('address', ''); 
 43 | 		$this->set('status', 0); 
 44 | 		$this->set('zoom', 0); 
 45 | 		// temporary runtime property to indicate the geocode should be skipped
 46 | 		$this->set('skipGeocode', false);
 47 | 		$this->set('statusString', '');
 48 | 	}
 49 | 
 50 | 	public function set($key, $value) {
 51 | 
 52 | 		if($key == 'lat' || $key == 'lng') {
 53 | 			// if value isn't numeric, then it's not valid: make it blank
 54 | 			if(strpos($value, ',') !== false) $value = str_replace(',', '.', $value); // convert 123,456 to 123.456
 55 | 			if(!is_numeric($value)) $value = '';	
 56 | 
 57 | 		} else if($key == 'address') {
 58 | 			$value = $this->wire()->sanitizer->text($value);
 59 | 
 60 | 		} else if($key == 'status') { 
 61 | 			$value = (int) $value; 
 62 | 			if(!isset($this->geocodeStatuses[$value])) $value = -1; // -1 = unknown
 63 | 		} else if($key == 'zoom') {
 64 | 			$value = (int) $value; 
 65 | 		}
 66 | 
 67 | 		return parent::set($key, $value);
 68 | 	}
 69 | 
 70 | 	public function get($key) {
 71 | 		if($key == 'statusString') return str_replace('_', ' ', $this->geocodeStatuses[$this->status]); 
 72 | 		return parent::get($key);
 73 | 	}
 74 | 
 75 | 	public function geocode() {
 76 | 		if($this->skipGeocode) return -100;
 77 | 
 78 | 		// check if address was already geocoded
 79 | 		if($this->geocodedAddress == $this->address) return $this->status; 
 80 | 		$this->geocodedAddress = $this->address;
 81 | 
 82 | 		$url = "https://maps.googleapis.com/maps/api/geocode/json?address=" . urlencode($this->address);
 83 | 	
 84 | 		/** @var FieldtypeMapMarker $fieldtype */
 85 | 		$fieldtype = $this->modules->get('FieldtypeMapMarker');
 86 | 		$apiKey = $fieldtype->get('googleApiKey');
 87 | 		if($apiKey) $url .= "&key=$apiKey";
 88 | 		$http = new WireHttp();
 89 | 		$json = $http->getJSON($url, true);
 90 | 		if(empty($json['status'])) $json['status'] = 'No response';
 91 | 
 92 | 		if($json['status'] != 'OK') {
 93 | 			$this->error("Error geocoding address: $json[status] ($url)");
 94 | 			if(isset($json['status'])) $this->status = (int) array_search($json['status'], $this->geocodeStatuses);
 95 | 				else $this->status = -1; 
 96 | 			$this->lat = 0;
 97 | 			$this->lng = 0;
 98 | 			return $this->status; 
 99 | 		}
100 | 
101 | 		$geometry = $json['results'][0]['geometry'];
102 | 		$location = $geometry['location'];
103 | 		$locationType = $geometry['location_type'];
104 | 
105 | 		$this->lat = $location['lat'];
106 | 		$this->lng = $location['lng'];
107 | 
108 | 		$statusString = $json['status'] . '_' . $locationType; 
109 | 		$status = array_search($statusString, $this->geocodeStatuses); 
110 | 		if($status === false) $status = 1; // OK	
111 | 
112 | 		$this->status = $status; 
113 | 		$this->message("Geocode {$this->statusString}: '{$this->address}'"); 
114 | 
115 | 		return $this->status; 
116 | 	}
117 | 
118 | 	/**
119 | 	 * If accessed as a string, then just output the lat, lng coordinates
120 | 	 *
121 | 	 */
122 | 	public function __toString() {
123 | 		return "$this->address ($this->lat, $this->lng, $this->zoom) [$this->statusString]";
124 | 	}
125 | 
126 | }


--------------------------------------------------------------------------------
/MarkupGoogleMap.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * ProcessWire Map Markup (JS)
  3 |  *
  4 |  * Renders maps for the FieldtypeMapMarker module
  5 |  * 
  6 |  * ProcessWire 3.x 
  7 |  * Copyright (C) 2023 by Ryan Cramer 
  8 |  * Licensed under MPL 2.0
  9 |  * 
 10 |  * http://processwire.com
 11 |  *
 12 |  * Javascript Usage:
 13 |  * =================
 14 |  * var map = new MarkupGoogleMap();
 15 |  * map.setOption('any-google-maps-option', 'value'); 
 16 |  * map.setOption('zoom', 12); // example
 17 |  * 
 18 |  * // init(container ID, latitude, longitude):
 19 |  * map.init('#map-div', 26.0936823, -77.5332796); 
 20 |  * 
 21 |  * // addMarker(latitude, longitude, optional URL, optional URL to icon file):
 22 |  * map.addMarker(26.0936823, -77.5332796, 'en.wikipedia.org/wiki/Castaway_Cay', ''); 
 23 |  * map.addMarker(...you may have as many of these as you want...); 
 24 |  * 
 25 |  * // optionally fit the map to the bounds of the markers you added
 26 |  * map.fitToMarkers();
 27 |  *
 28 |  */
 29 | 
 30 | function MarkupGoogleMap() {
 31 | 
 32 | 	this.map = null;
 33 | 	this.markers = [];
 34 | 	this.numMarkers = 0;
 35 | 	this.icon = '';
 36 | 	this.iconHover = '';
 37 | 	this.shadow = '';
 38 | 
 39 | 	this.hoverBox = null;
 40 | 	this.hoverBoxOffsetTop = 0;
 41 | 	this.hoverBoxOffsetLeft = 0;
 42 | 
 43 | 	this.options = {
 44 | 		zoom: 10, 
 45 | 		center: null, 
 46 | 		mapTypeId: google.maps.MapTypeId.ROADMAP, 
 47 | 		scrollwheel: false, 
 48 | 		mapTypeControlOptions: {
 49 | 			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU	
 50 | 		}, 
 51 | 		scaleControl: false,
 52 | 
 53 | 		// disable points of interest
 54 | 		styles: [{
 55 | 			featureType: "poi", 
 56 | 			stylers: [ { visibility: "off" } ]
 57 | 		}]
 58 | 	};
 59 | 
 60 | 
 61 | 	this._currentURL = '';
 62 | 
 63 | 	this.init = function(mapID, lat, lng) {
 64 | 		if(lat != 0) this.options.center = new google.maps.LatLng(lat, lng); 
 65 | 		this.map = new google.maps.Map(document.getElementById(mapID), this.options); 
 66 | 	}
 67 | 
 68 | 	this.setOption = function(key, value) {
 69 | 		this.options[key] = value; 
 70 | 	}
 71 | 
 72 | 	this.setIcon = function(url) {
 73 | 		this.icon = url;
 74 | 	}
 75 | 	
 76 | 	this.setIconHover = function(url) {
 77 | 		this.iconHover = url;
 78 | 	}
 79 | 
 80 | 	this.setShadow = function(url) {
 81 | 		this.shadow = url;
 82 | 	}
 83 | 
 84 | 	this.setHoverBox = function(markup) {
 85 | 
 86 | 		if(!markup.length) {
 87 | 			this.hoverBox = null;
 88 | 			return;
 89 | 		}
 90 | 
 91 | 		this.hoverBox = $(markup);
 92 | 		var $hoverBox = this.hoverBox;
 93 | 
 94 | 		this.hoverBoxOffsetTop = parseInt($hoverBox.attr('data-top')); 
 95 | 		this.hoverBoxOffsetLeft = parseInt($hoverBox.attr('data-left')); 
 96 | 
 97 | 		$("body").append($hoverBox);
 98 | 
 99 | 		// keep it hidden/out of the way until needed
100 | 		$hoverBox.css({
101 | 			position: 'absolute',
102 | 			left: 0,
103 | 			top: '-100px'
104 | 		});
105 | 
106 | 		$hoverBox.mouseout(function() {
107 | 			$hoverBox.hide();
108 | 		}).click(function() {
109 | 			if(this._currentURL.length > 0) window.location.href = this._currentURL;
110 | 		});
111 | 	}
112 | 
113 | 	this.addMarker = function(lat, lng, url, title, icon, shadow) {
114 | 		if(lat == 0.0) return;
115 | 
116 | 		var latLng = new google.maps.LatLng(lat, lng); 
117 | 		var zIndex = 99999 + this.numMarkers;
118 | 
119 | 		var markerOptions = {
120 | 			position: latLng, 
121 | 			map: this.map,
122 | 			linkURL: '',
123 | 			zIndex: zIndex
124 | 		}; 
125 | 
126 | 		if(typeof icon !== "undefined" && icon.length > 0) markerOptions.icon = icon;
127 | 			else if(this.icon) markerOptions.icon = this.icon;
128 | 		
129 | 		// console.log(markerOptions); 
130 | 		
131 | 		if(typeof shadow !== "undefined" && shadow.length > 0) markerOptions.shadow = shadow; 
132 | 			else if(this.shadow.length > 0) markerOptions.shadow = this.shadow; 
133 | 
134 | 		var marker = new google.maps.Marker(markerOptions); 
135 | 
136 | 		if(url.length > 0) marker.linkURL = url;
137 | 		if(this.hoverBox) marker.hoverBoxTitle = title; 
138 | 			else marker.setTitle(title); 
139 | 
140 | 		this.markers[this.numMarkers] = marker;
141 | 		this.numMarkers++;
142 | 
143 | 		if(marker.linkURL.length > 0) {
144 | 			google.maps.event.addListener(marker, 'click', function(e) {
145 | 				window.location.href = marker.linkURL; 
146 | 			}); 
147 | 		}
148 | 		
149 | 		if(markerOptions.icon !== "undefined" && this.iconHover) {
150 | 			var iconHover = this.iconHover; 
151 | 			google.maps.event.addListener(marker, 'mouseover', function(e) {
152 | 				marker.setIcon(iconHover); 
153 | 			});
154 | 			google.maps.event.addListener(marker, 'mouseout', function(e) {
155 | 				marker.setIcon(markerOptions.icon); 
156 | 			}); 
157 | 		}
158 | 
159 | 		if(this.hoverBox) {
160 | 
161 | 			var $hoverBox = this.hoverBox; 
162 | 			var offsetTop = this.hoverBoxOffsetTop;
163 | 			var offsetLeft = this.hoverBoxOffsetLeft; 
164 | 
165 | 			var mouseMove = function(e) {
166 | 				$hoverBox.css({
167 | 					'top': e.pageY + offsetTop,
168 | 					'left': e.pageX + offsetLeft
169 | 					});
170 | 			}; 
171 | 
172 | 			// console.log($hoverBox); 
173 | 
174 | 			google.maps.event.addListener(marker, 'mouseover', function(e) {
175 | 				this._currentURL = url;
176 | 				$hoverBox.html("<span>" + marker.hoverBoxTitle + "</span>")
177 | 					.css('top', '0px')
178 | 					.css('left', '0px')
179 | 					.css('display', 'block')
180 | 					.css('width', 'auto')
181 | 					.css('z-index', 9999); 
182 | 				$hoverBox.show();
183 | 
184 | 				$(document).mousemove(mouseMove); 
185 | 			}); 
186 | 
187 | 			google.maps.event.addListener(marker, 'mouseout', function(e) {
188 | 				$hoverBox.hide();
189 | 				$(document).unbind("mousemove", mouseMove);
190 | 			}); 
191 | 
192 | 		}
193 | 	}
194 | 
195 | 	this.fitToMarkers = function() {
196 | 
197 | 		var bounds = new google.maps.LatLngBounds();
198 | 		var map = this.map;
199 | 
200 | 		for(var i = 0; i < this.numMarkers; i++) {	
201 | 			var latLng = this.markers[i].position; 
202 | 			bounds.extend(latLng); 
203 | 		}
204 | 
205 | 		map.fitBounds(bounds);
206 | 
207 | 
208 | 		var listener = google.maps.event.addListener(map, "idle", function() { 
209 | 			if(map.getZoom() < 2) map.setZoom(2); 
210 | 			google.maps.event.removeListener(listener); 
211 | 		});
212 | 	}
213 | }


--------------------------------------------------------------------------------
/MarkupGoogleMap.module:
--------------------------------------------------------------------------------
  1 | <?php namespace ProcessWire; 
  2 | 
  3 | /**
  4 |  * ProcessWire Map Markup
  5 |  *
  6 |  * Renders maps for the FieldtypeMapMarker module
  7 |  * 
  8 |  * ProcessWire 3.x 
  9 |  * Copyright (C) 2023 by Ryan Cramer 
 10 |  * Licensed under MPL 2.0
 11 |  * 
 12 |  * https://processwire.com
 13 |  *
 14 |  * USAGE:
 15 |  * ======
 16 |  *
 17 |  * Add this somewhere before your closing </head> tag:
 18 |  * 
 19 |  *    <script type='text/javascript' src='<?=$modules->FieldtypeMapMarker->getGoogleMapsURL();?>'></script>
 20 |  *  
 21 |  * In the location where you want to output your map, do the following in your template file:
 22 |  * 
 23 |  *    $map = $modules->get('MarkupGoogleMap'); 
 24 |  *    echo $map->render($page, 'map'); // replace 'map' with the name of your FieldtypeMap field
 25 |  *
 26 |  * To render a map with multiple markers on it, specify a PageArray rather than a single $page: 
 27 |  *
 28 |  *    $items = $pages->find("template=something, map!='', sort=title"); 
 29 |  *    $map = $modules->get('MarkupGoogleMap'); 
 30 |  *    echo $map->render($items, 'map'); 
 31 |  *
 32 |  * To specify options, provide a 3rd argument with an options array:
 33 |  *
 34 |  *    $map = $modules->get('MarkupGoogleMap'); 
 35 |  *    echo $map->render($items, 'map', array('height' => '500px')); 
 36 |  *
 37 |  * 
 38 |  * OPTIONS
 39 |  * =======
 40 |  * Here is a list of all possible options (with defaults shown):  
 41 |  * 
 42 |  * // default width of the map 
 43 |  * 'width' => '100%' 
 44 |  * 
 45 |  * // default height of the map
 46 |  * 'height' => '300px' 
 47 |  * 
 48 |  * // zoom level
 49 |  * 'zoom' => 12 (or $field->defaultZoom)
 50 |  * 
 51 |  * // map type: ROADMAP, HYBRID or SATELLITE
 52 |  * 'type' => 'HYBRID' or $field->defaultType
 53 |  * 
 54 |  * // map ID attribute
 55 |  * 'id' => "mgmap" 
 56 |  * 
 57 |  * // map class attribute
 58 |  * 'class' => "MarkupGoogleMap" 
 59 |  * 
 60 |  * // center latitude
 61 |  * 'lat' => $field->defaultLat 
 62 |  * 
 63 |  * // center longitude
 64 |  * 'lng' => $field->defaultLng 
 65 |  * 
 66 |  * // set to false only if you will style the map <div> yourself
 67 |  * 'useStyles' => true 
 68 |  * 
 69 |  * // allows single-marker map to use marker settings rather than map settings
 70 |  * 'useMarkerSettings' => true 
 71 |  * 
 72 |  * // field to use for the marker link, or blank to not link
 73 |  * 'markerLinkField' => 'url' 
 74 |  *
 75 |  * // field to use for the marker title
 76 |  * 'markerTitleField' => 'title' 
 77 |  * 
 78 |  * // map will automatically adjust to fit to the given markers (when multiple markers)
 79 |  * 'fitToMarkers' => true 
 80 |  *
 81 |  * // use hover box? When true, shows a tooltip-type box when you hover the marker, populated with the markerTitleField
 82 |  * // this is often more useful than the default presentation google maps uses
 83 |  * 'useHoverBox' => false
 84 |  *
 85 |  * // when useHoverBox is true, you can specify the markup used for it. Use the following (which is the default) as your starting point:
 86 |  * 'hoverBoxMarkup' => "<div data-top='-10' data-left='15' style='background: #000; color: #fff; padding: 0.25em 0.5em; border-radius: 3px;'></div>", 
 87 |  *
 88 |  * // FUll URL to icon file to use for markers. Blank=use default Google marker icon. 
 89 |  * 'icon' => '', 
 90 |  * 
 91 |  * // Any extra javascript initialization code you want to occur before the map itself is drawn
 92 |  * 'init' => '', 
 93 |  *
 94 |  */
 95 | 
 96 | class MarkupGoogleMap extends WireData implements Module {
 97 | 
 98 | 	public static function getModuleInfo() {
 99 | 		return array(
100 | 			'title' => 'Map Markup (Google Maps)',
101 | 			'version' => 300,
102 | 			'summary' => 'Renders Google Maps for the MapMarker Fieldtype',
103 | 			'requires' => 'FieldtypeMapMarker',
104 | 		);
105 | 	}
106 | 
107 | 	/**
108 | 	 * Include our MapMarker class, which serves as the value for fields of type FieldtypeMapMarker
109 | 	 *
110 | 	 */
111 | 	public function init() {	
112 | 		require_once(dirname(__FILE__) . '/MapMarker.php'); 
113 | 	}
114 | 
115 | 	/**
116 | 	 * Get associative array of map options
117 | 	 * 
118 | 	 * @param string $fieldName
119 | 	 * @return array
120 | 	 * @throws WireException
121 | 	 * 
122 | 	 */
123 | 	public function getOptions($fieldName) {
124 | 
125 | 		static $n = 0; 
126 | 		$field = $this->wire()->fields->get($fieldName); 
127 | 		if(!$field) throw new WireException("Unknown field: $fieldName"); 
128 | 
129 | 		return array(
130 | 			'useStyles' => true, 
131 | 			'fitToMarkers' => true, 
132 | 			'useMarkerSettings' => true, 
133 | 			'useHoverBox' => false, 
134 | 			'hoverBoxMarkup' => "<div data-top='-10' data-left='15' style='background: #000; color: #fff; padding: 0.25em 0.5em; border-radius: 3px;'></div>", 
135 | 			'markerLinkField' => 'url', 
136 | 			'markerTitleField' => 'title', 
137 | 			'width' => '100%', 
138 | 			'height' => $field->get('height'), 
139 | 			'zoom' => $field->get('defaultZoom') ? (int) $field->get('defaultZoom') : 12, 
140 | 			'type' => $field->get('defaultType') ? $field->get('defaultType') : 'HYBRID', 
141 | 			'id' => "mgmap" . (++$n), 
142 | 			'class' => "MarkupGoogleMap", 
143 | 			'lat' => $field->get('defaultLat'),
144 | 			'lng' => $field->get('defaultLng'),
145 | 			'icon' => '', // url to icon (blank=use default)
146 | 			'iconHover' => '', // url to icon when hovered (default=none)
147 | 			'shadow' => '', // url to icon shadow (blank=use default)
148 | 			'init' => '', // additional javascript code to insert in map initialization
149 | 			'n' => $n, 
150 | 		);
151 | 	}
152 | 
153 | 	/**
154 | 	 * Get the script tag for loading Google Maps
155 | 	 * 
156 | 	 * @return string
157 | 	 * @throws WireException
158 | 	 * 
159 | 	 */
160 | 	public function getGMapScript() {
161 | 		$url = 'https://maps.google.com/maps/api/js';
162 | 		$key = $this->wire()->modules->get('FieldtypeMapMarker')->get('googleApiKey');
163 | 		if($key) $url .= "?key=$key";
164 | 		return "<script type='text/javascript' src='$url'></script>";
165 | 	}
166 | 
167 | 	/**
168 | 	 * Render map markup
169 | 	 * 
170 | 	 * @param PageArray|Page $pageArray Page (or multiple pages in PageArray) containing map field
171 | 	 * @param string $fieldName Name of the map field
172 | 	 * @param array $options Options to adjust behavior
173 | 	 * @return string
174 | 	 * @throws WireException
175 | 	 * 
176 | 	 */
177 | 	public function render($pageArray, $fieldName, array $options = array()) {
178 | 		$config = $this->wire()->config;
179 | 
180 | 		static $n = 0; 
181 | 		$n++;
182 | 
183 | 		$defaultOptions = $this->getOptions($fieldName); 
184 | 		$options = array_merge($defaultOptions, $options); 
185 | 		
186 | 		if($pageArray instanceof Page) {
187 | 			$page = $pageArray; 
188 | 			$pageArray = new PageArray();
189 | 			$pageArray->add($page); 
190 | 		}
191 | 
192 | 		$height = $options['height']; 
193 | 		$width = $options['width'];
194 | 		if(empty($height)) $height = 300; 
195 | 		if(ctype_digit("$height")) $height .= "px";
196 | 		if(ctype_digit("$width")) $width .= "px";
197 | 
198 | 		$style = '';	
199 | 		if($options['useStyles'] && !empty($height) && !empty($width)) {
200 | 			$style = " style='width: $width; height: $height;'"; 
201 | 		}	
202 | 
203 | 		$lat = $options['lat'];
204 | 		$lng = $options['lng'];
205 | 		$zoom = $options['zoom'] > 0 ? (int) $options['zoom'] : $defaultOptions['zoom'];
206 | 		$type = in_array($options['type'], array('ROADMAP', 'SATELLITE', 'HYBRID')) ? $options['type'] : 'HYBRID';
207 | 
208 | 		if($options['useMarkerSettings'] && (count($pageArray) == 1 || !$lat)) {
209 | 			// single marker overrides lat, lng and zoom settings
210 | 			$marker = $pageArray->first()->get($fieldName); 
211 | 			$lat = $marker->lat; 
212 | 			$lng = $marker->lng; 
213 | 			if($marker->zoom > 0) $zoom = (int) $marker->zoom;
214 | 		}
215 | 
216 | 		$id = $options['id'];
217 | 		$out = '';
218 | 
219 | 		if($n === 1) {
220 | 			$url = $config->urls('MarkupGoogleMap');
221 | 			$out .= "<script type='text/javascript' src='{$url}MarkupGoogleMap.js'></script>";
222 | 		}
223 | 
224 | 		$out .= "<div id='$id' class='$options[class]'$style></div>";
225 | 
226 | 		$out .= 
227 | 			"<script type='text/javascript'>" .
228 | 			"if(typeof google === 'undefined' || typeof google.maps === 'undefined') { " . 
229 | 			"alert('MarkupGoogleMap Error: Please add the maps.google.com script in your document head.'); " . 
230 | 			"} else { " . 
231 | 			"var $id = new MarkupGoogleMap(); " . 
232 | 			"$id.setOption('zoom', $zoom); " . 
233 | 			"$id.setOption('mapTypeId', google.maps.MapTypeId.$type); " . 
234 | 			($options['icon'] ? "$id.setIcon('$options[icon]'); " : "") .
235 | 			($options['iconHover'] ? "$id.setIconHover('$options[iconHover]'); " : "") . 
236 | 			($options['shadow'] ? "$id.setShadow('$options[shadow]'); " : "") . 
237 | 			($options['useHoverBox'] ? "$id.setHoverBox('" . str_replace("'", '"', $options['hoverBoxMarkup']) . "');" : "") . 
238 | 			$options['init'] . 
239 | 			"$id.init('$id', $lat, $lng); "; 
240 | 
241 | 		foreach($pageArray as $page) {
242 | 			$marker = $page->get($fieldName); 
243 | 			if(!$marker instanceof MapMarker) continue; 
244 | 			if(!$marker->lat) continue; 
245 | 			$url = $options['markerLinkField'] ? $page->get($options['markerLinkField']) : '';
246 | 			$title = $options['markerTitleField'] ? $page->get($options['markerTitleField']) : ''; 
247 | 			$out .= "$id.addMarker($marker->lat, $marker->lng, '$url', '$title', ''); ";
248 | 		}
249 | 
250 | 		if(count($pageArray) > 1 && $options['fitToMarkers']) $out .= "$id.fitToMarkers(); ";
251 | 		$out .= "}</script>";
252 | 
253 | 		return $out; 
254 | 	}
255 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # FieldtypeMapMarker Module for ProcessWire 
  2 | 
  3 | This Fieldtype for ProcessWire holds an address or location name, and automatically
  4 | geocodes the address to latitude/longitude using Google Maps API. The resulting 
  5 | values may be used to populate any kind of map (whether Google Maps or another). 
  6 | 
  7 | This Fieldtype was created to serve as an example of creating a custom Fieldtype and 
  8 | Inputfield that contains multiple pieces of data. Though the Fieldtype has now gone
  9 | far beyond that and is relatively full featured. As a result, it may no longer be
 10 | the simplest example of how to implement a Fieldtype/Inputfield, though it is very
 11 | effective and useful. 
 12 | 
 13 | MapMarker also has a corresponding Inputfield and Markup module, named
 14 | InputfieldMapMarker and MarkupGoogleMap. When you install FieldtypeMapMarker, the
 15 | Inputfield will also be installed and used for input on the admin side. Installation
 16 | of MarkupGoogleMap is optional. It provides a simple way to render Google maps with
 17 | the data managed by FieldtypeMapMarker. 
 18 | 
 19 | This Fieldtype has a [support forum](http://processwire.com/talk/index.php/topic,752.0.html)
 20 | 
 21 | ## Using Map Marker
 22 | 
 23 | ### How to install
 24 | 
 25 | 1. Copy all of the files for this module into /site/modules/FieldtypeMapMarker/
 26 | 
 27 | 2. In your admin, go to the Modules screen and "check for new modules." Click *install*
 28 |    for the Map Marker Fieldtype. 
 29 | 
 30 | 3. In your admin, go to Setup > Fields > Add New Field. Choose MapMarker as the type.
 31 |    If you are not sure what to name your field, simply "map" is a good one! Once created,
 32 |    configure the settings on the *input* tab. 
 33 | 
 34 | 4. Add your new "map" field to one or more templates, as you would any other field. 
 35 | 
 36 | ### How to use from the page editor
 37 | 
 38 | 1. Create or edit a page using one of the templates you added the "map" field to. 
 39 | 
 40 | 2. Type in a location or address into the "address" box for the map field. Then click 
 41 |    outside of the address, and the Javascript geocoder should automatically populate the
 42 |    latitude, longitude and map location. The Google geocoder will accept full addresses
 43 |    or known location names. For instance, you could type in "Disney Land" and it knows
 44 |    how to find locations like that. 
 45 | 
 46 | 3. The geocoding also works in reverse. You may drag the map marker wherever you want
 47 |    and it will populate the address field for you. You may also populate the latitude,
 48 |    longitude and zoom fields manually if you like. Unchecking the box between address
 49 |    and latitude disables the geocoder. 
 50 | 
 51 | ### How to use from the API, in your template files 
 52 | 
 53 | In your template files, you can utilize this data for your own Google Maps (or anything 
 54 | else that you might need latitude/longitude for). 
 55 | 
 56 | Lets assume that your field is called 'map'. Here is how you would access the
 57 | components of it from the API:
 58 | ```php
 59 | echo $page->map->address;	// outputs the address you entered
 60 | echo $page->map->lat; 		// outputs the latitude
 61 | echo $page->map->lng; 		// outputs the longitude
 62 | echo $page->map->zoom;		// outputs the zoom level
 63 | ```
 64 | 
 65 | -------------
 66 | 
 67 | ## Markup Google Map
 68 | 
 69 | This package also comes with a module called MarkupGoogleMap. It provides a simple means
 70 | of outputting a Google Map based on the data managed by FieldtypeMapMarker. To install,
 71 | simply click "install" for the Google Maps (Markup) module. This is a Markup module, 
 72 | meaning it exists primarily to generate markup for output on the front-end of your site.
 73 | 
 74 | ### How to use
 75 | 
 76 | Add this somewhere before your closing `</head>` tag:
 77 | ```html
 78 | <script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?sensor=false'></script>
 79 | ```
 80 | 
 81 | In the location where you want to output your map, place the following in your template file:
 82 | ```php
 83 | $map = $modules->get('MarkupGoogleMap'); 
 84 | echo $map->render($page, 'map'); 
 85 | ```
 86 | In the above, $page is the Page object that has the 'map' field. Replace 'map' with the name of 
 87 | your map field.
 88 | 
 89 | To render a map with multiple markers on it, specify a PageArray rather than a single $page: 
 90 | ```php
 91 | $items = $pages->find("template=something, map!='', sort=title"); 
 92 | $map = $modules->get('MarkupGoogleMap'); 
 93 | echo $map->render($items, 'map'); 
 94 | ````
 95 | 
 96 | To specify options, provide a 3rd argument with an options array:
 97 | ```php
 98 | $map = $modules->get('MarkupGoogleMap'); 
 99 | echo $map->render($items, 'map', array('height' => '500px')); 
100 | ```
101 | 
102 | ### Options
103 | 
104 | Here is a list of all possible options (with defaults shown):  
105 | 
106 | `width`    
107 | Width of the map (type: string; default: 100%).
108 | 
109 | `height`    
110 | Height of the map (type: string; default: 300px) 
111 | 
112 | `zoom`    
113 | Zoom level 1-25 (type: integer; default: from your field settings)
114 | 
115 | `type`   
116 | Map type: ROADMAP, HYBRID or SATELLITE (type: string; default: from your field settings)
117 | 
118 | `id`   
119 | Map ID attribute (type: string; default: mgmap)
120 | 
121 | `class`   
122 | Map class attribute (type: string; default: MarkupGoogleMap)
123 | 
124 | `lat`   
125 | Map center latitude (type: string|float; default: from your field settings)  
126 | 
127 | `lng`   
128 | Map center longitude (type: string|float; default: from your field settings)
129 | 
130 | `useStyles`   
131 | Whether to populate inline styles to the map div for width/height (type: boolean; default: true).
132 | Set to false only if you will style the map div yourself.
133 | 
134 | `useMarkerSettings`   
135 | Makes single-marker map use marker settings rather than map settings (type: boolean; default: true).
136 | 
137 | `markerLinkField`   
138 | Page field to use for the marker link, or blank to not link (type: string; default: url).
139 | 
140 | `markerTitleField`    
141 | Page field to use for the marker title, or blank not to use a marker title (type: string; default: title). 
142 | 
143 | `fitToMarkers`   
144 | When multiple markers are present, set map to automatically adjust to fit to the given markers (type: boolean; default: true). 
145 | 
146 | ---------


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