Skip to content

Commit 50ebdc2

Browse files
billdevcodebilldevcode
committed
Add cache, Velocity library & center marker on mouseover
1 parent 1d8e8ee commit 50ebdc2

File tree

3 files changed

+90
-58
lines changed

3 files changed

+90
-58
lines changed

‎projects/maps-locations/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<link rel="stylesheet" href="src/stylesheet.css">
1111
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
1212
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min.js"></script>
13-
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnaEYi_QuPmmF-_4xRQKKKx4pqwGahl4U&libraries=places" async></script>
13+
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAytr024G7F4gULgAW1eMTtExZjaFwJuzE&libraries=places" async></script>
1414
<script type="text/javascript" src="src/app.js" async></script>
1515
</head>
1616
<body>

‎projects/maps-locations/src/app.js‎

Lines changed: 78 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
$(document).ready(function() {
2+
23
var map, infowindow, querySearch, address,
34
useSideSearch = false, pyrmont, mapZoom = 14,
4-
places = {};
5+
places = {}, cachedPlaces = {};
56

67
getGeoLocation();
78

89
function getGeoLocation() {
9-
var url = 'https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyAytr024G7F4gULgAW1eMTtExZjaFwJuzE';
10+
const url = 'https://www.googleapis.com/geolocation/v1/geolocate?key=AIzaSyAytr024G7F4gULgAW1eMTtExZjaFwJuzE';
1011
$.ajax({
11-
url: url,
12+
url,
1213
method: 'POST',
13-
}).done(function(data) {
14-
initMap(data.location.lat, data.location.lng);
15-
}).fail(function() {
14+
}).done(response => {
15+
const { lat, lng } = response.location;
16+
initMap(lat, lng);
17+
}).fail(error => {
1618
alert("Cannot detect your location");
1719
});
1820
}
@@ -24,20 +26,18 @@ $(document).ready(function() {
2426
zoom: mapZoom,
2527
});
2628

27-
var defaultBounds = new google.maps.LatLngBounds(
29+
const defaultBounds = new google.maps.LatLngBounds(
2830
new google.maps.LatLng(lat, lng),
2931
new google.maps.LatLng(lat, lng));
30-
var input = document.getElementById('search-query');
31-
var options = {
32+
const input = document.getElementById('search-query');
33+
const options = {
3234
bounds: defaultBounds,
3335
};
3436
autocomplete = new google.maps.places.Autocomplete(input, options);
3537
}
3638

3739
$('.main-button, .sidenav-button').on("click", function() {
38-
if ($("#search-query").val() === '') {
39-
return;
40-
} else if (useSideSearch && $("#sidenav-query").val() === '') {
40+
if ($("#search-query").val() === '' || (useSideSearch && $("#sidenav-query").val() === '')) {
4141
return;
4242
}
4343

@@ -54,108 +54,134 @@ $(document).ready(function() {
5454
zoom: mapZoom,
5555
});
5656

57-
var request = {
57+
const request = {
5858
location: pyrmont,
5959
radius: '10',
6060
query: querySearch,
6161
};
6262

63-
infowindow = new google.maps.InfoWindow();
64-
var service = new google.maps.places.PlacesService(map);
65-
service.textSearch(request, callback);
63+
if (cachedPlaces[querySearch]) {
64+
cachePlaces();
65+
} else {
66+
infowindow = new google.maps.InfoWindow();
67+
const service = new google.maps.places.PlacesService(map);
68+
service.textSearch(request, callback);
69+
}
70+
71+
function cachePlaces() {
72+
const foundPlaces = cachedPlaces[querySearch];
73+
const placesLength = foundPlaces.length;
74+
places = {};
75+
for (let i = 0; i < placesLength; i++) {
76+
const { place_id } = foundPlaces[i];
77+
createMarker(foundPlaces[i]);
78+
addSearchResultToSide(foundPlaces[i]);
79+
places[place_id] = foundPlaces[i];
80+
}
81+
}
6682

6783
function callback(results, status) {
6884
if (status === google.maps.places.PlacesServiceStatus.OK) {
69-
for (var i = 0; i < results.length; i++) {
85+
const listOfPlacesForCache = [];
86+
const resultsLength = results.length;
87+
for (let i = 0; i < resultsLength; i++) {
88+
const { place_id } = results[i];
7089
createMarker(results[i]);
7190
addSearchResultToSide(results[i]);
72-
places[results[i].place_id] = results[i];
91+
places[place_id] = results[i];
92+
listOfPlacesForCache.push(results[i]);
7393
}
94+
cachedPlaces[querySearch] = listOfPlacesForCache;
7495
}
7596
}
7697

7798
function addSearchResultToSide(place) {
78-
address = place.formatted_address.split(',');
99+
const { formatted_address, place_id, name } = place;
100+
address = formatted_address.split(',');
79101
$(".results-list").append(
80-
`<li id="${place.place_id}">${place.name}<br>
81-
${address[0]}<br>
82-
${address[1]}, ${address[2]}</li>`)
83-
}
84-
slideSideNav();
102+
`<li id="${place_id}">
103+
<p>${name}</p>
104+
<p>${address[0]}</p>
105+
<p>${address[1]}, ${address[2]}</p>
106+
</li>`)
107+
108+
addEscKeyListener();
109+
}
110+
slideSideNav();
85111

86112
$(".results-list").on("mouseenter", "li", function() {
87113
var place;
88-
var findPlace = $(this).attr("id");
114+
const findPlace = $(this).attr("id");
89115

90116
for (var id in places) {
91117
if (places[id].place_id === findPlace) {
92118
place = places[id];
93119
}
94120
}
95-
var marker = new google.maps.Marker({
121+
const marker = new google.maps.Marker({
96122
position: place.geometry.location,
97-
map: map,
123+
map
98124
})
99125
setContentToMarker(place);
100126
infowindow.open(map, marker);
101127
createMarker(place);
128+
map.setCenter(marker.getPosition());
102129
});
103130

104131
function createMarker(place) {
105-
var marker = new google.maps.Marker({
106-
map: map,
132+
const marker = new google.maps.Marker({
133+
map,
107134
position: place.geometry.location,
108135
});
109136

110-
google.maps.event.addListener(marker, 'click', function() {
137+
google.maps.event.addListener(marker, 'mouseover', function() {
111138
setContentToMarker(place);
112139
infowindow.open(map, this);
113140
});
114141
}
115142
});
116143

117144
function setContentToMarker(place) {
118-
address = place.formatted_address.split(',');
145+
const { formatted_address, name } = place;
146+
address = formatted_address.split(',');
119147
infowindow.setContent(
120-
`<strong>${place.name}</strong><br>
121-
${address[0]}<br>
122-
${address[1]}, ${address[2]}`);
148+
`<div class="mapMarker">
149+
<h3>${name}</h3>
150+
<p>${address[0]}</p>
151+
<p>${address[1]}, ${address[2]}</p>
152+
</div>`);
123153
}
124154

125155
$("#search-query").keydown(function(e) {
126-
if (e.which == 13) {
127-
$(".main-button").click();
128-
}
156+
if (e.which == 13) { $(".main-button").click(); }
129157
});
130158

131159
$("#sidenav-query").keydown(function(e) {
132-
if (e.which == 13) {
133-
$(".sidenav-button").click();
134-
}
160+
if (e.which == 13) { $(".sidenav-button").click(); }
135161
});
136162

137-
$(document).on('keydown', function(e) {
138-
if (e.which == 27 && useSideSearch) {
139-
$("#close-nav").click();
140-
}
141-
})
163+
function addEscKeyListener() {
164+
document.addEventListener('keydown', function(e) {
165+
if (e.which == 27 && useSideSearch) {
166+
$("#close-nav").click();
167+
}
168+
})
169+
}
142170

143171
function slideSideNav() {
144-
var mq = window.matchMedia( "(min-width: 500px)" );
172+
const mq = window.matchMedia( "(min-width: 500px)" );
145173
if (mq.matches) {
146-
$(".sidenav").css("width", "250px");
147-
$("#map").css("marginLeft", "250px");
174+
$(".sidenav").velocity({width: "250px"});
175+
$("#map").velocity({marginLeft: "250px"});
148176
$("#sidenav-query").val(querySearch).focus();
149177
useSideSearch = true;
150-
} else {
151-
return;
152178
}
153179
}
154180

155181
$("#close-nav").on("click", function() {
156182
$("#search-query").val('').focus();
157-
$("#map").css("marginLeft", "0");
158-
$(".sidenav").css("width", "0");
183+
$("#map").velocity({marginLeft: "0px"});
184+
$(".sidenav").velocity({width: "0px"});
159185
$(".search-container").show();
160186
$("#search-query").focus();
161187
useSideSearch = false;

‎projects/maps-locations/src/stylesheet.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ body {
7575
-webkit-transition-duration: 0.4s;
7676
transition-duration: 0.4s;
7777
cursor: pointer;
78-
background-color: white;
79-
color: black;
80-
border: 1px solid #008CBA;
78+
background-color: #00ACE4;
79+
color: white;
80+
border: none;
8181
}
8282

8383
.search-button:hover {
@@ -92,7 +92,6 @@ body {
9292

9393
#map {
9494
height: 100%;
95-
transition: margin-left .5s;
9695
}
9796

9897
.sidenav {
@@ -105,7 +104,6 @@ body {
105104
background-color: #111;
106105
overflow-x: hidden;
107106
padding-top: 60px;
108-
transition: 0.5s;
109107
}
110108

111109
.sidenav a,
@@ -131,4 +129,12 @@ li:hover {
131129
right: 25px;
132130
font-size: 36px;
133131
margin-left: 50px;
132+
}
133+
134+
.mapMarker * {
135+
margin: 0;
136+
}
137+
138+
.results-list li p {
139+
margin: 0;
134140
}

0 commit comments

Comments
 (0)