Browse Source

use google maps to autocomplete event locations

pull/108/head
Aaron Parecki 6 years ago
parent
commit
b8c3b34c28
No known key found for this signature in database GPG Key ID: 276C2817346D6056
  1. 3
      lib/config.template.php
  2. 94
      public/libs/bootstrap-typeahead/typeahead.css
  3. 1538
      public/libs/bootstrap-typeahead/typeahead.min.js
  4. 137
      views/event.php

3
lib/config.template.php

@ -19,5 +19,8 @@ class Config {
public static $twitterClientID = '';
public static $twitterClientSecret = '';
// https://developers.google.com/maps/documentation/javascript/get-api-key
public static $googleMapsAPIKey = '';
}

94
public/libs/bootstrap-typeahead/typeahead.css

@ -0,0 +1,94 @@
span.twitter-typeahead .tt-menu,
span.twitter-typeahead .tt-dropdown-menu {
cursor: pointer;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
text-align: left;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
span.twitter-typeahead .tt-suggestion {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
span.twitter-typeahead .tt-suggestion.tt-cursor,
span.twitter-typeahead .tt-suggestion:hover,
span.twitter-typeahead .tt-suggestion:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #337ab7;
}
.input-group.input-group-lg span.twitter-typeahead .form-control {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
.input-group.input-group-sm span.twitter-typeahead .form-control {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
span.twitter-typeahead {
width: 100%;
}
.input-group span.twitter-typeahead {
display: block !important;
height: 34px;
}
.input-group span.twitter-typeahead .tt-menu,
.input-group span.twitter-typeahead .tt-dropdown-menu {
top: 32px !important;
}
.input-group span.twitter-typeahead:not(:first-child):not(:last-child) .form-control {
border-radius: 0;
}
.input-group span.twitter-typeahead:first-child .form-control {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group span.twitter-typeahead:last-child .form-control {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.input-group.input-group-sm span.twitter-typeahead {
height: 30px;
}
.input-group.input-group-sm span.twitter-typeahead .tt-menu,
.input-group.input-group-sm span.twitter-typeahead .tt-dropdown-menu {
top: 30px !important;
}
.input-group.input-group-lg span.twitter-typeahead {
height: 46px;
}
.input-group.input-group-lg span.twitter-typeahead .tt-menu,
.input-group.input-group-lg span.twitter-typeahead .tt-dropdown-menu {
top: 46px !important;
}

1538
public/libs/bootstrap-typeahead/typeahead.min.js
File diff suppressed because it is too large
View File

137
views/event.php

@ -34,8 +34,10 @@
<div class="form-group" style="margin-top: 18px;">
<label>Location</label>
<input type="text" class="form-control" id="event_location" placeholder="" value="">
<span class="help-block" id="location_preview"></span>
</div>
<div id="map" class="hidden" style="width: 100%; height: 180px; border-radius: 4px; border: 1px #ccc solid;"></div>
<div class="form-group" style="margin-top: 18px;">
<label for="note_category">Tags</label>
@ -50,10 +52,127 @@
</div>
<link rel="stylesheet" href="/libs/bootstrap-typeahead/typeahead.css">
<script src="/libs/bootstrap-typeahead/typeahead.min.js"></script>
<?php if(Config::$googleMapsAPIKey): ?>
<script src="https://maps.googleapis.com/maps/api/js?key=<?= Config::$googleMapsAPIKey ?>&libraries=places"></script>
<?php endif ?>
<script>
<?php if(Config::$googleMapsAPIKey): ?>
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-45,122),
zoom: 15
});
<?php else: ?>
var map = null;
<?php endif ?>
var selectedPlace;
if(map) {
var gservice = new google.maps.places.AutocompleteService();
var gplaces = new google.maps.places.PlacesService(map);
var selectedPlacePin;
}
$(function(){
var d = new Date();
$("#start_date .timezone").val(tz_seconds_to_offset(d.getTimezoneOffset() * 60 * -1));
/* $("#end_date .timezone").val(tz_seconds_to_offset(d.getTimezoneOffset() * 60 * -1)); */
if(map) {
$("#event_location").typeahead({
minLength: 3,
highlight: true
}, {
limit: 5,
async: true,
source: function(query, sync, async) {
gservice.getPlacePredictions({ input: query }, function(predictions, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
async(predictions);
}
});
},
display: function(item) {
return item.description;
},
templates: {
suggestion: function(item) {
return '<span>'+item.description+'</span>';
}
}
}).bind('typeahead:select', function(ev, suggestion) {
gplaces.getDetails({
placeId: suggestion.place_id,
fields: ["geometry", "name", "address_component", "url"]
}, function(result, status) {
if(status != google.maps.places.PlacesServiceStatus.OK) {
alert('Cannot find address');
return;
}
map.setCenter(result.geometry.location);
if(selectedPlacePin) {
selectedPlacePin.setMap(null);
selectedPlacePin = null;
}
selectedPlacePin = new google.maps.Marker({
position: result.geometry.location,
map: map
});
selectedPlace = {
type: ["h-card"],
properties: {
name: [result.name],
latitude: [result.geometry.location.lat()],
longitude: [result.geometry.location.lng()],
}
};
address = '';
locality = '';
region = '';
country = '';
for(var i in result.address_components) {
if(result.address_components[i].types.includes('street_number')) {
address += ' '+result.address_components[i].short_name;
}
if(result.address_components[i].types.includes('route')) {
address += ' '+result.address_components[i].short_name;
}
if(result.address_components[i].types.includes('locality')) {
locality = result.address_components[i].long_name;
}
if(result.address_components[i].types.includes('administrative_area_level_1')) {
region = result.address_components[i].long_name;
}
if(result.address_components[i].types.includes('country')) {
country = result.address_components[i].short_name;
}
}
if(address) {
selectedPlace['properties']['street-address'] = [address.trim()];
}
if(locality) {
selectedPlace['properties']['locality'] = [locality];
}
if(region) {
selectedPlace['properties']['region'] = [region];
}
if(country) {
selectedPlace['properties']['country-name'] = [country];
}
$("#map").removeClass("hidden");
$("#location_preview").text('');
});
});
}
});
$("#note_category").tokenfield({
@ -63,16 +182,22 @@
$("#btn_post").click(function(){
var event_start = $("#start_date .date").val()+"T"+$("#start_date .time").val()+$("#start_date .timezone").val();
var event_start = $("#start_date .date").val();
if($("#start_date .time").val()) {
event_start += "T"+$("#start_date .time").val()+$("#start_date .timezone").val();
}
var event_end;
if($("#end_date .date").val()) {
event_end = $("#end_date .date").val()+"T"+$("#end_date .time").val()+$("#end_date .timezone").val();
event_end = $("#end_date .date").val();
if($("#end_date .time").val()) {
event_end += "T"+$("#end_date .time").val()+$("#end_date .timezone").val();
}
}
var properties = {
name: $("#event_name").val(),
start: event_start,
location: $("#event_location").val(),
name: [$("#event_name").val()],
start: [event_start],
location: (selectedPlace ? selectedPlace : $("#event_location").val()),
category: tokenfieldToArray("#note_category")
};
@ -83,7 +208,7 @@
$.post("/micropub/postjson", {
data: JSON.stringify({
"type": "h-event",
"type": ["h-event"],
"properties": properties
})
}, function(response){

Loading…
Cancel
Save