jon
/
Quill
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

use google maps to autocomplete event locations

pull/108/head
Aaron Parecki 6 years ago
parent
c67f48eb28
commit
b8c3b34c28
No known key found for this signature in database GPG Key ID: 276C2817346D6056
4 changed files with 1766 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
View File

@ -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
View File

@ -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){

Write Preview
Loading…
Cancel
Save