mattmcw
/
these-3-words
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add experimental search bar.

This commit is contained in:
Kevin Dungs 2014-11-18 11:56:39 +01:00
parent c3d518a68d
commit c01af15828
3 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/css/style.css
View File

@ -9,3 +9,31 @@ body,
margin: 0;
padding: 0;
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}

16
static/js/app.js
View File

@ -44,6 +44,22 @@ var These3Words = (function () {
google.maps.event.addListener(that.map, 'click', function (evt) {
that.moveTo(evt.latLng);
});
var searchInput = document.createElement('input');
searchInput.id = 'pac-input';
searchInput.classList.add('controls');
searchInput.setAttribute('type', 'text');
searchInput.setAttribute('placeholder', 'Search Box');
that.map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchInput);
var searchBox = new google.maps.places.SearchBox(searchInput);
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length > 0) {
var place = places[0];
that.map.setCenter(place.geometry.location);
that.moveTo(place.geometry.location);
}
});
};
this.mapCanvas = document.body.appendChild(document.createElement('div'));
this.mapCanvas.id = 'map-canvas';

2
views/map.html
View File

@ -21,7 +21,7 @@
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="/static/js/app.js"></script>
<script>
(function() {