Full integration of OpenStreetMaps, removal of Google Maps code

assets/js/admin/locationpicker.js

@@ -1,16 +0,0 @@
-jQuery(document).ready(function($){
-	$(".sp-location-picker").locationpicker({
-		location: {
-			latitude: Number($(".sp-latitude").val()),
-			longitude: Number($(".sp-longitude").val())
-		},
-		radius: 0,
-		inputBinding: {
-	        latitudeInput: $(".sp-latitude"),
-	        longitudeInput: $(".sp-longitude"),
-	        locationNameInput: $(".sp-address")
-	    },
-    	addressFormat: null,
-	    enableAutocomplete: true
-	});
-});

assets/js/locationpicker.jquery.js

@@ -1,400 +0,0 @@
-/*! jquery-locationpicker - v0.1.16 - 2017-10-02 */
-(function($) {
-    function GMapContext(domElement, options) {
-        var _map = new google.maps.Map(domElement, options);
-        var _marker = new google.maps.Marker({
-            position: new google.maps.LatLng(54.19335, -3.92695),
-            map: _map,
-            title: "Drag Me",
-            visible: options.markerVisible,
-            draggable: options.markerDraggable,
-            icon: options.markerIcon !== undefined ? options.markerIcon : undefined
-        });
-        return {
-            map: _map,
-            marker: _marker,
-            circle: null,
-            location: _marker.position,
-            radius: options.radius,
-            locationName: options.locationName,
-            addressComponents: {
-                formatted_address: null,
-                addressLine1: null,
-                addressLine2: null,
-                streetName: null,
-                streetNumber: null,
-                city: null,
-                district: null,
-                state: null,
-                stateOrProvince: null
-            },
-            settings: options.settings,
-            domContainer: domElement,
-            geodecoder: new google.maps.Geocoder()
-        };
-    }
-    var GmUtility = {
-        drawCircle: function(gmapContext, center, radius, options) {
-            if (gmapContext.circle != null) {
-                gmapContext.circle.setMap(null);
-            }
-            if (radius > 0) {
-                radius *= 1;
-                options = $.extend({
-                    strokeColor: "#0000FF",
-                    strokeOpacity: .35,
-                    strokeWeight: 2,
-                    fillColor: "#0000FF",
-                    fillOpacity: .2
-                }, options);
-                options.map = gmapContext.map;
-                options.radius = radius;
-                options.center = center;
-                gmapContext.circle = new google.maps.Circle(options);
-                return gmapContext.circle;
-            }
-            return null;
-        },
-        setPosition: function(gMapContext, location, callback) {
-            gMapContext.location = location;
-            gMapContext.marker.setPosition(location);
-            gMapContext.map.panTo(location);
-            this.drawCircle(gMapContext, location, gMapContext.radius, {});
-            if (gMapContext.settings.enableReverseGeocode) {
-                this.updateLocationName(gMapContext, callback);
-            } else {
-                if (callback) {
-                    callback.call(this, gMapContext);
-                }
-            }
-        },
-        locationFromLatLng: function(lnlg) {
-            return {
-                latitude: lnlg.lat(),
-                longitude: lnlg.lng()
-            };
-        },
-        addressByFormat: function(addresses, format) {
-            var result = null;
-            for (var i = addresses.length - 1; i >= 0; i--) {
-                if (addresses[i].types.indexOf(format) >= 0) {
-                    result = addresses[i];
-                }
-            }
-            return result || addresses[0];
-        },
-        updateLocationName: function(gmapContext, callback) {
-            gmapContext.geodecoder.geocode({
-                latLng: gmapContext.marker.position
-            }, function(results, status) {
-                if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
-                    var address = GmUtility.addressByFormat(results, gmapContext.settings.addressFormat);
-                    gmapContext.locationName = address.formatted_address;
-                    gmapContext.addressComponents = GmUtility.address_component_from_google_geocode(address.address_components);
-                } else if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
-                    return setTimeout(function() {
-                        GmUtility.updateLocationName(gmapContext, callback);
-                    }, 1e3);
-                }
-                if (callback) {
-                    callback.call(this, gmapContext);
-                }
-            });
-        },
-        address_component_from_google_geocode: function(address_components) {
-            var result = {};
-            for (var i = address_components.length - 1; i >= 0; i--) {
-                var component = address_components[i];
-                if (component.types.indexOf("postal_code") >= 0) {
-                    result.postalCode = component.short_name;
-                } else if (component.types.indexOf("street_number") >= 0) {
-                    result.streetNumber = component.short_name;
-                } else if (component.types.indexOf("route") >= 0) {
-                    result.streetName = component.short_name;
-                } else if (component.types.indexOf("locality") >= 0) {
-                    result.city = component.short_name;
-                } else if (component.types.indexOf("sublocality") >= 0) {
-                    result.district = component.short_name;
-                } else if (component.types.indexOf("administrative_area_level_1") >= 0) {
-                    result.stateOrProvince = component.short_name;
-                } else if (component.types.indexOf("country") >= 0) {
-                    result.country = component.short_name;
-                }
-            }
-            result.addressLine1 = [ result.streetNumber, result.streetName ].join(" ").trim();
-            result.addressLine2 = "";
-            return result;
-        }
-    };
-    function isPluginApplied(domObj) {
-        return getContextForElement(domObj) != undefined;
-    }
-    function getContextForElement(domObj) {
-        return $(domObj).data("locationpicker");
-    }
-    function updateInputValues(inputBinding, gmapContext) {
-        if (!inputBinding) return;
-        var currentLocation = GmUtility.locationFromLatLng(gmapContext.marker.position);
-        if (inputBinding.latitudeInput) {
-            inputBinding.latitudeInput.val(currentLocation.latitude).change();
-        }
-        if (inputBinding.longitudeInput) {
-            inputBinding.longitudeInput.val(currentLocation.longitude).change();
-        }
-        if (inputBinding.radiusInput) {
-            inputBinding.radiusInput.val(gmapContext.radius).change();
-        }
-        if (inputBinding.locationNameInput) {
-            inputBinding.locationNameInput.val(gmapContext.locationName).change();
-        }
-    }
-    function setupInputListenersInput(inputBinding, gmapContext) {
-        if (inputBinding) {
-            if (inputBinding.radiusInput) {
-                inputBinding.radiusInput.on("change", function(e) {
-                    var radiusInputValue = $(this).val();
-                    if (!e.originalEvent || isNaN(radiusInputValue)) {
-                        return;
-                    }
-                    gmapContext.radius = radiusInputValue;
-                    GmUtility.setPosition(gmapContext, gmapContext.location, function(context) {
-                        context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
-                    });
-                });
-            }
-            if (inputBinding.locationNameInput && gmapContext.settings.enableAutocomplete) {
-                var blur = false;
-                gmapContext.autocomplete = new google.maps.places.Autocomplete(inputBinding.locationNameInput.get(0), gmapContext.settings.autocompleteOptions);
-                google.maps.event.addListener(gmapContext.autocomplete, "place_changed", function() {
-                    blur = false;
-                    var place = gmapContext.autocomplete.getPlace();
-                    if (!place.geometry) {
-                        gmapContext.settings.onlocationnotfound(place.name);
-                        return;
-                    }
-                    GmUtility.setPosition(gmapContext, place.geometry.location, function(context) {
-                        updateInputValues(inputBinding, context);
-                        context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
-                    });
-                });
-                if (gmapContext.settings.enableAutocompleteBlur) {
-                    inputBinding.locationNameInput.on("change", function(e) {
-                        if (!e.originalEvent) {
-                            return;
-                        }
-                        blur = true;
-                    });
-                    inputBinding.locationNameInput.on("blur", function(e) {
-                        if (!e.originalEvent) {
-                            return;
-                        }
-                        setTimeout(function() {
-                            var address = $(inputBinding.locationNameInput).val();
-                            if (address.length > 5 && blur) {
-                                blur = false;
-                                gmapContext.geodecoder.geocode({
-                                    address: address
-                                }, function(results, status) {
-                                    if (status == google.maps.GeocoderStatus.OK && results && results.length) {
-                                        GmUtility.setPosition(gmapContext, results[0].geometry.location, function(context) {
-                                            updateInputValues(inputBinding, context);
-                                            context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
-                                        });
-                                    }
-                                });
-                            }
-                        }, 1e3);
-                    });
-                }
-            }
-            if (inputBinding.latitudeInput) {
-                inputBinding.latitudeInput.on("change", function(e) {
-                    var latitudeInputValue = $(this).val();
-                    if (!e.originalEvent || isNaN(latitudeInputValue)) {
-                        return;
-                    }
-                    GmUtility.setPosition(gmapContext, new google.maps.LatLng(latitudeInputValue, gmapContext.location.lng()), function(context) {
-                        context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
-                        updateInputValues(gmapContext.settings.inputBinding, gmapContext);
-                    });
-                });
-            }
-            if (inputBinding.longitudeInput) {
-                inputBinding.longitudeInput.on("change", function(e) {
-                    var longitudeInputValue = $(this).val();
-                    if (!e.originalEvent || isNaN(longitudeInputValue)) {
-                        return;
-                    }
-                    GmUtility.setPosition(gmapContext, new google.maps.LatLng(gmapContext.location.lat(), longitudeInputValue), function(context) {
-                        context.settings.onchanged.apply(gmapContext.domContainer, [ GmUtility.locationFromLatLng(context.location), context.radius, false ]);
-                        updateInputValues(gmapContext.settings.inputBinding, gmapContext);
-                    });
-                });
-            }
-        }
-    }
-    function autosize(gmapContext) {
-        google.maps.event.trigger(gmapContext.map, "resize");
-        setTimeout(function() {
-            gmapContext.map.setCenter(gmapContext.marker.position);
-        }, 300);
-    }
-    function updateMap(gmapContext, $target, options) {
-        var settings = $.extend({}, $.fn.locationpicker.defaults, options), latNew = settings.location.latitude, lngNew = settings.location.longitude, radiusNew = settings.radius, latOld = gmapContext.settings.location.latitude, lngOld = gmapContext.settings.location.longitude, radiusOld = gmapContext.settings.radius;
-        if (latNew == latOld && lngNew == lngOld && radiusNew == radiusOld) return;
-        gmapContext.settings.location.latitude = latNew;
-        gmapContext.settings.location.longitude = lngNew;
-        gmapContext.radius = radiusNew;
-        GmUtility.setPosition(gmapContext, new google.maps.LatLng(gmapContext.settings.location.latitude, gmapContext.settings.location.longitude), function(context) {
-            setupInputListenersInput(gmapContext.settings.inputBinding, gmapContext);
-            context.settings.oninitialized($target);
-        });
-    }
-    $.fn.locationpicker = function(options, params) {
-        if (typeof options == "string") {
-            var _targetDomElement = this.get(0);
-            if (!isPluginApplied(_targetDomElement)) return;
-            var gmapContext = getContextForElement(_targetDomElement);
-            switch (options) {
-              case "location":
-                if (params == undefined) {
-                    var location = GmUtility.locationFromLatLng(gmapContext.location);
-                    location.radius = gmapContext.radius;
-                    location.name = gmapContext.locationName;
-                    return location;
-                } else {
-                    if (params.radius) {
-                        gmapContext.radius = params.radius;
-                    }
-                    GmUtility.setPosition(gmapContext, new google.maps.LatLng(params.latitude, params.longitude), function(gmapContext) {
-                        updateInputValues(gmapContext.settings.inputBinding, gmapContext);
-                    });
-                }
-                break;
-
-              case "subscribe":
-                if (params == undefined) {
-                    return null;
-                } else {
-                    var event = params.event;
-                    var callback = params.callback;
-                    if (!event || !callback) {
-                        console.error('LocationPicker: Invalid arguments for method "subscribe"');
-                        return null;
-                    }
-                    google.maps.event.addListener(gmapContext.map, event, callback);
-                }
-                break;
-
-              case "map":
-                if (params == undefined) {
-                    var locationObj = GmUtility.locationFromLatLng(gmapContext.location);
-                    locationObj.formattedAddress = gmapContext.locationName;
-                    locationObj.addressComponents = gmapContext.addressComponents;
-                    return {
-                        map: gmapContext.map,
-                        marker: gmapContext.marker,
-                        location: locationObj
-                    };
-                } else {
-                    return null;
-                }
-
-              case "autosize":
-                autosize(gmapContext);
-                return this;
-            }
-            return null;
-        }
-        return this.each(function() {
-            var $target = $(this);
-            if (isPluginApplied(this)) {
-                updateMap(getContextForElement(this), $(this), options);
-                return;
-            }
-            var settings = $.extend({}, $.fn.locationpicker.defaults, options);
-            var gmapContext = new GMapContext(this, $.extend({}, {
-                zoom: settings.zoom,
-                center: new google.maps.LatLng(settings.location.latitude, settings.location.longitude),
-                mapTypeId: settings.mapTypeId,
-                mapTypeControl: false,
-                styles: settings.styles,
-                disableDoubleClickZoom: false,
-                scrollwheel: settings.scrollwheel,
-                streetViewControl: false,
-                radius: settings.radius,
-                locationName: settings.locationName,
-                settings: settings,
-                autocompleteOptions: settings.autocompleteOptions,
-                addressFormat: settings.addressFormat,
-                draggable: settings.draggable,
-                markerIcon: settings.markerIcon,
-                markerDraggable: settings.markerDraggable,
-                markerVisible: settings.markerVisible
-            }, settings.mapOptions));
-            $target.data("locationpicker", gmapContext);
-            function displayMarkerWithSelectedArea() {
-                GmUtility.setPosition(gmapContext, gmapContext.marker.position, function(context) {
-                    var currentLocation = GmUtility.locationFromLatLng(gmapContext.location);
-                    updateInputValues(gmapContext.settings.inputBinding, gmapContext);
-                    context.settings.onchanged.apply(gmapContext.domContainer, [ currentLocation, context.radius, true ]);
-                });
-            }
-            if (settings.markerInCenter) {
-                gmapContext.map.addListener("bounds_changed", function() {
-                    if (!gmapContext.marker.dragging) {
-                        gmapContext.marker.setPosition(gmapContext.map.center);
-                        updateInputValues(gmapContext.settings.inputBinding, gmapContext);
-                    }
-                });
-                gmapContext.map.addListener("idle", function() {
-                    if (!gmapContext.marker.dragging) {
-                        displayMarkerWithSelectedArea();
-                    }
-                });
-            }
-            google.maps.event.addListener(gmapContext.marker, "drag", function(event) {
-                updateInputValues(gmapContext.settings.inputBinding, gmapContext);
-            });
-            google.maps.event.addListener(gmapContext.marker, "dragend", function(event) {
-                displayMarkerWithSelectedArea();
-            });
-            GmUtility.setPosition(gmapContext, new google.maps.LatLng(settings.location.latitude, settings.location.longitude), function(context) {
-                updateInputValues(settings.inputBinding, gmapContext);
-                setupInputListenersInput(settings.inputBinding, gmapContext);
-                context.settings.oninitialized($target);
-            });
-        });
-    };
-    $.fn.locationpicker.defaults = {
-        location: {
-            latitude: 40.7324319,
-            longitude: -73.82480777777776
-        },
-        locationName: "",
-        radius: 500,
-        zoom: 15,
-        mapTypeId: google.maps.MapTypeId.ROADMAP,
-        styles: [],
-        mapOptions: {},
-        scrollwheel: true,
-        inputBinding: {
-            latitudeInput: null,
-            longitudeInput: null,
-            radiusInput: null,
-            locationNameInput: null
-        },
-        enableAutocomplete: false,
-        enableAutocompleteBlur: false,
-        autocompleteOptions: null,
-        addressFormat: "postal_code",
-        enableReverseGeocode: true,
-        draggable: true,
-        onchanged: function(currentLocation, radius, isMarkerDropped) {},
-        onlocationnotfound: function(locationName) {},
-        oninitialized: function(component) {},
-        markerIcon: undefined,
-        markerDraggable: true,
-        markerVisible: true
-    };
-})(jQuery);

includes/admin/class-sp-admin-assets.php

@@ -87,16 +87,10 @@ class SP_Admin_Assets {
 
 		wp_register_script( 'jquery-fitvids', SP()->plugin_url() . '/assets/js/jquery.fitvids.js', array( 'jquery' ), '1.1', true );
 
-		//wp_register_script( 'google-maps', '//tboy.co/maps_js' );
-		
 		//OpenStreetMaps
 		wp_register_script( 'leaflet_js', SP()->plugin_url() . '/assets/js/leaflet.js', array(), '1.4.0' );
 		wp_register_script( 'control-geocoder', SP()->plugin_url() . '/assets/js/Control.Geocoder.js', array( 'leaflet_js' ) );
 
-		//wp_register_script( 'jquery-locationpicker', SP()->plugin_url() . '/assets/js/locationpicker.jquery.js', array( 'jquery', 'google-maps' ), '0.1.6', true );
-
-		//wp_register_script( 'sportspress-admin-locationpicker', SP()->plugin_url() . '/assets/js/admin/locationpicker.js', array( 'jquery', 'google-maps', 'jquery-locationpicker' ), SP_VERSION, true );
-
 		wp_register_script( 'sportspress-admin-equationbuilder', SP()->plugin_url() . '/assets/js/admin/equationbuilder.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-draggable', 'jquery-ui-droppable' ), SP_VERSION, true );
 
 		wp_register_script( 'sportspress-admin-colorpicker', SP()->plugin_url() . '/assets/js/admin/colorpicker.js', array( 'jquery', 'wp-color-picker', 'iris' ), SP_VERSION, true );
@@ -139,7 +133,6 @@ class SP_Admin_Assets {
 
 	    // Edit venue pages
 	    if ( in_array( $screen->id, array( 'edit-sp_venue' ) ) ) {
-	    	//wp_enqueue_script( 'google-maps' );
 	    	wp_enqueue_script( 'leaflet_js' );
 	    	wp_enqueue_script( 'control-geocoder' );
 	    	wp_enqueue_script( 'jquery-locationpicker' );

includes/admin/class-sp-admin-taxonomies.php

@@ -105,6 +105,7 @@ class SP_Admin_Taxonomies {
 			$term_meta = get_option( "taxonomy_$t_id" );
 			$latitude = sp_array_value( $term_meta, 'sp_latitude', '40.7324319' );
 			$longitude = sp_array_value( $term_meta, 'sp_longitude', '-73.82480799999996' );
+			$address = sp_array_value( $term_meta, 'sp_address', '' );
 		endif;
 		// Sanitize latitude and longitude, fallback to default.
 		if( ! is_numeric( $latitude) || ! is_numeric( $longitude) ):
@@ -113,73 +114,65 @@ class SP_Admin_Taxonomies {
 		endif;
 		?>
 		<div class="form-field">
-			<!--<label for="term_meta[sp_address]"><?php //_e( 'Address', 'sportspress' ); ?></label>
-			<input type="text" class="sp-address" name="term_meta[sp_address]" id="term_meta[sp_address]" value="">-->
-			<!--<p><div class="sp-location-picker"></div></p>-->
 			<p><div id="mapDiv" style="width: 95%; height: 320px"></div></p>
 			<p><?php _e( "Drag the marker to the venue's location.", 'sportspress' ); ?></p>
 		</div>
 		<script>
-			// position we will use later
+		//Initialize the map and add the Search control box
-			var lat = <?php echo $latitude;?>;
+			var map = L.map('mapDiv').setView([<?php echo $latitude;?>, <?php echo $longitude;?>], 15),
-			var lon = <?php echo $longitude;?>;
-			// initialize map
-			
-			var map = L.map('mapDiv').setView([lat, lon], 15);
-			// set map tiles source
-			L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-			  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
-			  maxZoom: 15,
-			}).addTo(map);
-			
-			//L.Control.geocoder().addTo(map);
-			
-			var geocoder = L.Control.geocoder({
-				defaultMarkGeocode: true
-			})
-			.on('markgeocode', function(e) {
-				var center = e.geocode.center;
-				document.getElementById('term_meta[sp_latitude]').value = center.lat;
-				document.getElementById('term_meta[sp_longitude]').value = center.lng;
-			})
-			.addTo(map);
-
-			// add marker to the map
-			marker = L.marker([lat, lon],{draggable: true, autoPan: true}).addTo(map);
-			//get new coordinates and pass them to the fields
-			marker.on('dragend', function (e) {
-				document.getElementById('term_meta[sp_latitude]').value = marker.getLatLng().lat;
-				document.getElementById('term_meta[sp_longitude]').value = marker.getLatLng().lng;
-			});
-		</script>
-		<!--<script type="text/javascript">
-		var map = L.map('mapDiv').setView([0, 0], 2),
 				geocoder = L.Control.Geocoder.nominatim(),
 				control = L.Control.geocoder({
-				geocoder: geocoder
+					geocoder: geocoder,
+					collapsed: false,
+					defaultMarkGeocode: false
 				}).addTo(map),
-			marker;
+				//Add a marker to use from the begining
+				marker = L.marker([<?php echo $latitude;?>, <?php echo $longitude;?>],{draggable: true, autoPan: true}).addTo(map);
 
 			L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 				attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 			}).addTo(map);
 			
-		map.on('click', function(e) {
+			//Pass the values to the fields after dragging
-			geocoder.reverse(e.latlng, map.options.crs.scale(map.getZoom()), function(results) {
+			marker.on('dragend', function (e) {
+					document.getElementById('term_meta[sp_latitude]').value = marker.getLatLng().lat;
+					document.getElementById('term_meta[sp_longitude]').value = marker.getLatLng().lng;
+					geocoder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
 						var r = results[0];
 						if (r) {
-					if (marker) {
+							document.getElementById('term_meta[sp_address]').value = r.name;
-						marker.
-							setLatLng(r.center).
-							setPopupContent(r.html || r.name).
-							openPopup();
-					} else {
-						marker = L.marker(r.center).bindPopup(r.name).addTo(map).openPopup();
-					}
 						}
 					})
+				});
+			
+			//After searching
+			control.on('markgeocode', function(e) {
+				var center = e.geocode.center;
+				var address = e.geocode.name;
+				map.setView([center.lat, center.lng], 15); //Center map to the new place
+				map.removeLayer(marker); //Remove previous marker
+				marker = L.marker([center.lat, center.lng],{draggable: true, autoPan: true}).addTo(map); //Add new marker to use
+				//Pass the values to the fields after searching
+				document.getElementById('term_meta[sp_latitude]').value = center.lat;
+				document.getElementById('term_meta[sp_longitude]').value = center.lng;
+				document.getElementById('term_meta[sp_address]').value = address;
+				//Pass the values to the fields after dragging
+				marker.on('dragend', function (e) {
+					document.getElementById('term_meta[sp_latitude]').value = marker.getLatLng().lat;
+					document.getElementById('term_meta[sp_longitude]').value = marker.getLatLng().lng;
+					geocoder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
+						var r = results[0];
+						if (r) {
+							document.getElementById('term_meta[sp_address]').value = r.name;
+						}
 					})
-	</script>-->
+				});
+			}).addTo(map);
+		</script>
+		<div class="form-field">
+			<label for="term_meta[sp_address]"><?php _e( 'Address', 'sportspress' ); ?></label>
+			<input type="text" class="sp-address" name="term_meta[sp_address]" id="term_meta[sp_address]" value="<?php echo esc_attr( $address ); ?>">
+		</div>
 		<div class="form-field">
 			<label for="term_meta[sp_latitude]"><?php _e( 'Latitude', 'sportspress' ); ?></label>
 			<input type="text" class="sp-latitude" name="term_meta[sp_latitude]" id="term_meta[sp_latitude]" value="<?php echo esc_attr( $latitude ); ?>">
@@ -199,27 +192,87 @@ class SP_Admin_Taxonomies {
 	 */
 	public function edit_venue_fields( $term ) {
 	 	$t_id = $term->term_id;
-		$term_meta = get_option( "taxonomy_$t_id" ); ?>
+		$term_meta = get_option( "taxonomy_$t_id" ); 
+		$latitude = is_numeric( esc_attr( $term_meta['sp_latitude'] ) ) ? esc_attr( $term_meta['sp_latitude'] ) : '';
+		$longitude = is_numeric( esc_attr( $term_meta['sp_longitude'] ) ) ? esc_attr( $term_meta['sp_longitude'] ) : '';
+		$address = esc_attr( $term_meta['sp_address'] ) ? esc_attr( $term_meta['sp_address'] ) : '';
+		?>
+		<tr class="form-field">
+			<td colspan="2">
+				<p><div id="mapDiv" style="width: 95%; height: 320px"></div></p>
+				<p class="description"><?php _e( "Drag the marker to the venue's location.", 'sportspress' ); ?></p>
+			</td>
+		</tr>
 		<tr class="form-field">
 			<th scope="row" valign="top"><label for="term_meta[sp_address]"><?php _e( 'Address', 'sportspress' ); ?></label></th>
 			<td>
-				<input type="text" class="sp-address" name="term_meta[sp_address]" id="term_meta[sp_address]" value="<?php echo esc_attr( $term_meta['sp_address'] ) ? esc_attr( $term_meta['sp_address'] ) : ''; ?>">
+				<input type="text" class="sp-address" name="term_meta[sp_address]" id="term_meta[sp_address]" value="<?php echo $address; ?>">
-				<p><div class="sp-location-picker"></div></p>
-				<p class="description"><?php _e( "Drag the marker to the venue's location.", 'sportspress' ); ?></p>
 			</td>
 		</tr>
 		<tr class="form-field">
 			<th scope="row" valign="top"><label for="term_meta[sp_latitude]"><?php _e( 'Latitude', 'sportspress' ); ?></label></th>
 			<td>
-				<input type="text" class="sp-latitude" name="term_meta[sp_latitude]" id="term_meta[sp_latitude]" value="<?php echo is_numeric( esc_attr( $term_meta['sp_latitude'] ) ) ? esc_attr( $term_meta['sp_latitude'] ) : ''; ?>">
+				<input type="text" class="sp-latitude" name="term_meta[sp_latitude]" id="term_meta[sp_latitude]" value="<?php echo $latitude; ?>">
 			</td>
 		</tr>
 		<tr class="form-field">
 			<th scope="row" valign="top"><label for="term_meta[sp_longitude]"><?php _e( 'Longitude', 'sportspress' ); ?></label></th>
 			<td>
-				<input type="text" class="sp-longitude" name="term_meta[sp_longitude]" id="term_meta[sp_longitude]" value="<?php echo is_numeric( esc_attr( $term_meta['sp_longitude'] ) ) ? esc_attr( $term_meta['sp_longitude'] ) : ''; ?>">
+				<input type="text" class="sp-longitude" name="term_meta[sp_longitude]" id="term_meta[sp_longitude]" value="<?php echo $longitude; ?>">
 			</td>
 		</tr>
+		<script>
+		//Initialize the map and add the Search control box
+			var map = L.map('mapDiv').setView([<?php echo $latitude;?>, <?php echo $longitude;?>], 15),
+				geocoder = L.Control.Geocoder.nominatim(),
+				control = L.Control.geocoder({
+					geocoder: geocoder,
+					collapsed: false,
+					defaultMarkGeocode: false
+				}).addTo(map),
+				//Add a marker to use from the begining
+				marker = L.marker([<?php echo $latitude;?>, <?php echo $longitude;?>],{draggable: true, autoPan: true}).addTo(map);
+
+			L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+				attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+			}).addTo(map);
+			
+			//Pass the values to the fields after dragging
+			marker.on('dragend', function (e) {
+					document.getElementById('term_meta[sp_latitude]').value = marker.getLatLng().lat;
+					document.getElementById('term_meta[sp_longitude]').value = marker.getLatLng().lng;
+					geocoder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
+						var r = results[0];
+						if (r) {
+							document.getElementById('term_meta[sp_address]').value = r.name;
+						}
+					})
+				});
+			
+			//After searching
+			control.on('markgeocode', function(e) {
+				var center = e.geocode.center;
+				var address = e.geocode.name;
+				map.setView([center.lat, center.lng], 15); //Center map to the new place
+				map.removeLayer(marker); //Remove previous marker
+				marker = L.marker([center.lat, center.lng],{draggable: true, autoPan: true}).addTo(map); //Add new marker to use
+				//Pass the values to the fields after searching
+				document.getElementById('term_meta[sp_latitude]').value = center.lat;
+				document.getElementById('term_meta[sp_longitude]').value = center.lng;
+				document.getElementById('term_meta[sp_address]').value = address;
+				//Pass the values to the fields after dragging
+				marker.on('dragend', function (e) {
+					document.getElementById('term_meta[sp_latitude]').value = marker.getLatLng().lat;
+					document.getElementById('term_meta[sp_longitude]').value = marker.getLatLng().lng;
+					geocoder.reverse(marker.getLatLng(), map.options.crs.scale(map.getZoom()), function(results) {
+						var r = results[0];
+						if (r) {
+							document.getElementById('term_meta[sp_address]').value = r.name;
+						}
+					})
+				});
+			}).addTo(map);
+		</script>
 	<?php
 	}
 

includes/admin/settings/class-sp-settings-events.php

@@ -181,7 +181,7 @@ class SP_Settings_Events extends SP_Settings_Page {
 				),
 
 				array(
-					'title'     => __( 'Google Maps', 'sportspress' ),
+					'title'     => __( 'OpenStreetMaps', 'sportspress' ),
 					'desc' 		=> __( 'Display maps', 'sportspress' ),
 					'id' 		=> 'sportspress_event_show_maps',
 					'default'	=> 'yes',

includes/class-sp-frontend-scripts.php

@@ -74,6 +74,10 @@ class SP_Frontend_Scripts {
 		wp_enqueue_script( 'jquery-datatables', plugin_dir_url( SP_PLUGIN_FILE ) .'assets/js/jquery.dataTables.min.js', array( 'jquery' ), '1.10.4', true );
 		wp_enqueue_script( 'sportspress', plugin_dir_url( SP_PLUGIN_FILE ) .'assets/js/sportspress.js', array( 'jquery' ), SP()->version, true );
 		
+		if( is_single() && get_post_type()=='sp_event' ){
+			wp_enqueue_script( 'leaflet_js', SP()->plugin_url() . '/assets/js/leaflet.js', array(), '1.4.0' );
+		}
+
 		// Localize scripts
 		wp_localize_script( 'sportspress', 'localized_strings', array( 'days' => __( 'days', 'sportspress' ), 'hrs' => __( 'hrs', 'sportspress' ), 'mins' => __( 'mins', 'sportspress' ), 'secs' => __( 'secs', 'sportspress' ), 'previous' => __( 'Previous', 'sportspress' ), 'next' => __( 'Next', 'sportspress' ) ) );
 
@@ -100,6 +104,10 @@ class SP_Frontend_Scripts {
 			foreach ( $enqueue_styles as $handle => $args )
 				wp_enqueue_style( $handle, $args['src'], $args['deps'], $args['version'], $args['media'] );
 		endif;
+		
+		if( is_single() && get_post_type()=='sp_event' ){
+			wp_enqueue_style( 'leaflet_stylesheet', SP()->plugin_url() . '/assets/css/leaflet.css', array(), '1.4.0' );
+		}
 	}
 
 	/**

templates/venue-map.php

@@ -25,15 +25,31 @@ if ( 'satellite' !== $maptype ) $maptype = 'roadmap';
 
 if ( $latitude != null && $longitude != null ):
     ?>
-    <div class="sp-google-map-container">
+    <a href="https://www.openstreetmap.org/?mlat=<?php echo $latitude; ?>&amp;mlon=<?php echo $longitude; ?>#map=<?php echo $zoom; ?>/<?php echo $latitude; ?>/<?php echo $longitude; ?>" target="_blank"><div id="sp_openstreetmaps_container" style="width: 100%; height: 320px"></div></a>
-      <iframe
+	<script>
-        class="sp-google-map<?php if ( is_tax( 'sp_venue' ) ): ?> sp-venue-map<?php endif; ?>"
+    // position we will use later
-        width="600"
+    var lat = <?php echo $latitude; ?>;
-        height="320"
+    var lon = <?php echo $longitude; ?>;
-        frameborder="0" style="border:0"
+    // initialize map
-        src="//tboy.co/maps_embed?q=<?php echo $address; ?>&amp;center=<?php echo $latitude; ?>,<?php echo $longitude; ?>&amp;zoom=<?php echo $zoom; ?>&amp;maptype=<?php echo $maptype; ?>" allowfullscreen>
+    map = L.map('sp_openstreetmaps_container', { zoomControl:false }).setView([lat, lon], <?php echo $zoom; ?>);
-      </iframe>
+    // set map tiles source
-      <a href="https://www.google.com.au/maps/place/<?php echo $address; ?>/@<?php echo $latitude; ?>,<?php echo $longitude; ?>,<?php echo $zoom; ?>z" target="_blank" class="sp-google-map-link"></a>
+    <?php if ( 'satellite' === $maptype ) { ?>
-    </div>
+		L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+		  attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+		  maxZoom: 18,
+		}).addTo(map);
+	<?php }else{ ?>
+		L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
+		  maxZoom: 18,
+		}).addTo(map);
+	<?php } ?>
+    // add marker to the map
+    marker = L.marker([lat, lon]).addTo(map);
+	map.dragging.disable();
+	map.touchZoom.disable();
+	map.doubleClickZoom.disable();
+	map.scrollWheelZoom.disable();
+  </script>
     <?php
 endif;