Skip to content
Permalink
Browse files

refactor 2: map abstraction

  • Loading branch information...
bbraithwaite committed Apr 9, 2015
1 parent 53e61d9 commit 4c54177c68948e3e0ad2a8c9f5f077841a210f85
Showing with 130 additions and 79 deletions.
  1. +19 −79 app/index.html
  2. +111 −0 app/map-service.js
@@ -5,49 +5,33 @@
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="map-service.js"></script>
<script type="text/javascript">
/*
* NOTE: this (probably) isn't how you should be doing JavaScript!
*/
var sanFran = new google.maps.LatLng(37.7577, -122.4376);
var markers = [];
var watermark = 'Enter film title...';
var lastKeyStroke;
var infoShown = false;
var mapOptions = {
center: sanFran,
zoom: 11,
mapTypeControl: false,
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
overviewMapControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
}
};
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, mapOptions);
map = new MapService(window.google, mapDiv);
var searchControlDiv = document.createElement('div');
searchControlDiv.id = 'top';
searchControlDiv.className = 'top';
new SearchControl(searchControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchControlDiv);
map.addView(searchControlDiv, 'TOP_LEFT');
var homeControlDiv = document.createElement('div');
homeControlDiv.id = 'bottom_panel';
homeControlDiv.className = 'bottom_panel';
new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(homeControlDiv);
map.addView(homeControlDiv, 'BOTTOM_CENTER');
}
google.maps.event.addDomListener(window, 'load', initialize);
@@ -90,16 +74,8 @@
function clicked(selected) {
map.setCenter(sanFran);
map.setZoom(11);
markers.forEach(function(m) {
m.setMap(null);
});
markers = [];
mapOptions.streetViewControl = false;
mapOptions.zoomControl = true;
map.setOptions(mapOptions);
map.clearMarkers();
map.setOptions({ streetViewControl: false, zoomControl: true });
document.getElementById('films_results').innerHTML = '';
var regEx = /<strong>(.+)<\/strong><span>(.+),\s([0-9]+)<\/span><br>/g;
@@ -119,7 +95,10 @@
xhr.onload = function() {
var response = this.response;
for (var i = 0; i < response.locations.length; i++) {
plotOnMap(response, response.locations[i], response.locations.length);
map.plotLocation(
response.locations[i].geo.lat,
response.locations[i].geo.lng,
zoom(response, response.locations[i]));
};
}
xhr.open("GET", "/movies/locations?title=" + encodeURIComponent(title) + '&director=' + encodeURIComponent(director));
@@ -130,9 +109,9 @@
function autoCompleteEvent(control) {
document.getElementById('films_results').innerHTML = '';
mapOptions.streetViewControl = false;
mapOptions.zoomControl = false;
map.setOptions(mapOptions);
// mapOptions.streetViewControl = false;
// mapOptions.zoomControl = false;
map.setOptions({ streetViewControl: false, zoomControl: false });
lastKeyStroke = new Date();
@@ -219,39 +198,9 @@
xhr.send();
}
function plotOnMap(detail, location) {
var pos = new google.maps.LatLng(location.geo.lat, location.geo.lng);
var marker = new google.maps.Marker({
position: pos,
map: map,
animation: google.maps.Animation.DROP,
title: location.formatted_address
});
if (!infoShown) {
var infowindow = new google.maps.InfoWindow({
content: '<strong>Click on a marker to see more info about a location!</strong>',
maxWidth: 100
});
infowindow.open(map, marker);
setTimeout(function() {
infowindow.close();
}, 3000);
infoShown = true;
};
google.maps.event.addListener(marker, 'click', zoom(detail, location));
markers.push(marker);
}
function zoom(detail, location) {
return function() {
var pos = new google.maps.LatLng(location.geo.lat, location.geo.lng);
map.setCenter(pos);
map.setZoom(14);
console.log(location);
map.zoomView(location.geo.lat, location.geo.lng);
var locationDiv = document.getElementById('location_detail');
@@ -272,15 +221,10 @@
sateliteViewButton.addEventListener('click', function() {
if (this.value === 'Satelite View') {
map.setCenter(pos);
map.setZoom(20);
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
map.setTilt(45);
map.setHeading(90);
map.sateliteView(location.geo.lat, location.geo.lng);
this.value = 'Back to Roadmap'
} else {
map.setZoom(14);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.roadmapView(location.geo.lat, location.geo.lng);
this.value = 'Satelite View'
}
@@ -293,9 +237,7 @@
streetViewButton.value = 'Street View';
streetViewButton.addEventListener('click', function() {
var panorama = map.getStreetView();
panorama.setPosition({lat: location.geo.lat, lng: location.geo.lng});
panorama.setVisible(true);
map.streetView(location.geo.lat, location.geo.lng);
});
locationDiv.appendChild(streetViewButton);
@@ -305,9 +247,7 @@
backToFilm.value = 'Back to Film';
backToFilm.addEventListener('click', function() {
map.setZoom(11);
map.setCenter(sanFran);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
map.reset();
var location_detail = document.getElementById('location_detail');
if (location_detail) {
location_detail.style.display = 'none';
@@ -0,0 +1,111 @@
'use strict';

window.MapService = function(google, mapDiv) {

var markers = [];
var sanFrancisco = new google.maps.LatLng(37.7577, -122.4376);

var mapOptions = {
center: sanFrancisco,
zoom: 11,
mapTypeControl: false,
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
overviewMapControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
};

var mapInstance = new google.maps.Map(mapDiv, mapOptions);
var views = [];

return {
onload: function(element, callback) {
google.maps.event.addDomListener(window, 'load', callback);
},
addView: function(view, position) {
// if there is already a view in this position?
if (views[position]) {
views[position].forEach(function(v) {
v.style.display = 'none';
});
} else {
views[position] = [];
}

var newView = true;
views[position].forEach(function(v) {
if (v.id === view.id) {
newView = false;
}
});

if (newView) {
views[position].push(view);
mapInstance.controls[google.maps.ControlPosition[position]]
.push(view);
} else {
console.log(view);
}

view.style.display = '';
},
setOptions: function(opts) {
mapInstance.setOptions(opts);
},
zoomView: function(lat, lng) {
var pos = new google.maps.LatLng(lat, lng);
mapInstance.setCenter(pos);
mapInstance.setZoom(14);
},
roadmapView: function(lat, lng) {
var pos = new google.maps.LatLng(lat, lng);
mapInstance.setCenter(pos);
mapInstance.setZoom(14);
mapInstance.setMapTypeId(google.maps.MapTypeId.ROADMAP);
},
sateliteView: function(lat, lng) {
var pos = new google.maps.LatLng(lat, lng);
mapInstance.setCenter(pos);
mapInstance.setZoom(20);
mapInstance.setMapTypeId(google.maps.MapTypeId.SATELLITE);
mapInstance.setTilt(45);
mapInstance.setHeading(90);
},
streetView: function(lat, lng) {
var panorama = mapInstance.getStreetView();
panorama.setPosition({lat: lat, lng: lng});
panorama.setVisible(true);
},
clearMarkers: function() {
markers.forEach(function(m) {
m.setMap(null);
});
markers = [];
},
reset: function() {
mapInstance.setZoom(11);
mapInstance.setCenter(sanFrancisco);
mapInstance.setMapTypeId(google.maps.MapTypeId.ROADMAP);
},
plotLocation: function(lat, lng, clickHandler) {
var pos = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: pos,
map: mapInstance,
animation: google.maps.Animation.DROP
});

markers.push(marker);

if (clickHandler) {
google.maps.event.addListener(marker, 'click', clickHandler);
}
}
};
};

0 comments on commit 4c54177

Please sign in to comment.
You can’t perform that action at this time.