Return to Question

My Google Maps Script v1

My Google Maps Script v1

Does my script have any room for improvement?

I'm always concerned about naming in particular.

Does my script have any room for improvement (naming, readability, oop, etc.)?

I'm going to pair it with some live time functionality, so that whenever the map its location changes the time would be updated accordingly.

(function (window, document) {
 'use strict';
 var MAP_DEFAULT_ADDRESS = 'Paris, France',
 MAP_CANVAS_ID = 'map-canvas',
 ADDRESS_INPUT_ID = 'address-input',
 SEARCH_BUTTON_ID = 'search-button';
 var googleMap,
 currentLocation,
 googleGeocoder = new google.maps.Geocoder(),
 addressInput = document.getElementById(ADDRESS_INPUT_ID),
 markers = [];
 googleGeocoder.geocode({ 'address': MAP_DEFAULT_ADDRESS }, function (results, status) {
 if (status !== google.maps.GeocoderStatus.OK) {
 throw new Error('Geocode was unsuccessful: ' + status);
 }
 googleMap = new google.maps.Map(document.getElementById(MAP_CANVAS_ID), {
 // required
 center: results[0].geometry.location,
 zoom: 10,
 // disable direct GUI interaction
 disableDefaultUI: true,
 navigationControl: false,
 mapTypeControl: false,
 scaleControl: false,
 scrollwheel: false,
 draggable: false,
 zoomControl: false,
 disableDoubleClickZoom: true,
 suppressInfoWindows: true
 });
 currentLocation = results[0].geometry.location;
 addressInput.value = results[0].formatted_address;
 addMarker(results[0].geometry.location);
 });
 // center map responsively
 window.addEventListener('resize', function () {
 center = googleMap.getCenter();
 google.maps.event.trigger(googleMap, 'resize');
 googleMap.setCenter(center);
 });
 addressInput.onkeydown = function (e) {
 if (e.keyCode === 13) {
 addressInput.blur();
 processAddressInput();
 }
 };
 document.getElementById(SEARCH_BUTTON_ID).onclick = function () {
 processAddressInput();
 }
 function addMarker(location) {
 var marker = new google.maps.Marker({
 map: googleMap,
 position: location
 });
 marker.setAnimation(google.maps.Animation.DROP);
 markers.push(marker);
 google.maps.event.addListener(marker, 'click', function () {
 if (marker.getAnimation() !== null) {
 marker.setAnimation(null);
 } else {
 marker.setAnimation(google.maps.Animation.BOUNCE);
 }
 });
 }
 function deleteAllMarkers() {
 for (var i = 0; i < markers.length; i++) {
 markers[i].setMap(null);
 }
 }
 function processAddressInput() {
 googleGeocoder.geocode({ 'address': addressInput.value }, function (results, status) {
 if (status !== google.maps.GeocoderStatus.OK) {
 if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
 return;
 }
 throw new Error('Geocode was unsuccessful: ' + status);
 }
 if (results[0].geometry.location.equals(currentLocation)) {
 addressInput.value = results[0].formatted_address;
 return;
 }
 deleteAllMarkers();
 googleMap.fitBounds(results[0].geometry.viewport);
 googleMap.setCenter(results[0].geometry.location);
 currentLocation = results[0].geometry.location;
 addressInput.value = results[0].formatted_address;
 addMarker(results[0].geometry.location);
 });
 }
}(window, document));

I'm always concerned about naming in particular.

I'm going to pair it with some live time functionality, so that whenever the map its location changes the time would be updated accordingly.

(function (window, document) {
 'use strict';
 var MAP_DEFAULT_ADDRESS = 'Paris, France',
 MAP_CANVAS_ID = 'map-canvas',
 ADDRESS_INPUT_ID = 'address-input',
 SEARCH_BUTTON_ID = 'search-button';
 var googleMap,
 currentLocation,
 googleGeocoder = new google.maps.Geocoder(),
 addressInput = document.getElementById(ADDRESS_INPUT_ID),
 markers = [];
 googleGeocoder.geocode({ 'address': MAP_DEFAULT_ADDRESS }, function (results, status) {
 if (status !== google.maps.GeocoderStatus.OK) {
 throw new Error('Geocode was unsuccessful: ' + status);
 }
 googleMap = new google.maps.Map(document.getElementById(MAP_CANVAS_ID), {
 // required
 center: results[0].geometry.location,
 zoom: 10,
 // disable direct GUI interaction
 disableDefaultUI: true,
 navigationControl: false,
 mapTypeControl: false,
 scaleControl: false,
 scrollwheel: false,
 draggable: false,
 zoomControl: false,
 disableDoubleClickZoom: true,
 suppressInfoWindows: true
 });
 currentLocation = results[0].geometry.location;
 addressInput.value = results[0].formatted_address;
 addMarker(results[0].geometry.location);
 });
 // center map responsively
 window.addEventListener('resize', function () {
 var center = googleMap.getCenter();
 google.maps.event.trigger(googleMap, 'resize');
 googleMap.setCenter(center);
 });
 addressInput.onkeydown = function (e) {
 if (e.keyCode === 13) {
 addressInput.blur();
 processAddressInput();
 }
 };
 document.getElementById(SEARCH_BUTTON_ID).onclick = function () {
 processAddressInput();
 }
 function addMarker(location) {
 var marker = new google.maps.Marker({
 map: googleMap,
 position: location
 });
 marker.setAnimation(google.maps.Animation.DROP);
 markers.push(marker);
 google.maps.event.addListener(marker, 'click', function () {
 if (marker.getAnimation() !== null) {
 marker.setAnimation(null);
 } else {
 marker.setAnimation(google.maps.Animation.BOUNCE);
 }
 });
 }
 function deleteAllMarkers() {
 for (var i = 0; i < markers.length; i++) {
 markers[i].setMap(null);
 }
 }
 function processAddressInput() {
 googleGeocoder.geocode({ 'address': addressInput.value }, function (results, status) {
 if (status !== google.maps.GeocoderStatus.OK) {
 if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
 return;
 }
 throw new Error('Geocode was unsuccessful: ' + status);
 }
 if (results[0].geometry.location.equals(currentLocation)) {
 addressInput.value = results[0].formatted_address;
 return;
 }
 deleteAllMarkers();
 googleMap.fitBounds(results[0].geometry.viewport);
 googleMap.setCenter(results[0].geometry.location);
 currentLocation = results[0].geometry.location;
 addressInput.value = results[0].formatted_address;
 addMarker(results[0].geometry.location);
 });
 }
}(window, document));