My Google Maps Script v2 My Google Maps Script v1



Using the Google Maps JavaScript API v3.

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.

I've added this script to my HTML code right after the last DOM node it needs to work.

google-maps.js

(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 &lt; 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));
This is almost spotless, congratulations.

When processing the results, you refer to results[0] many times.
I would put that in a local variable to clarify, for example firstResult.
(An IDE can give a warning if you mistype firstResult,
but it cannot give a warning if you mistype the array index (for example  results[2]))

You missed a semicolon at the end of this:


document.getElementById(SEARCH_BUTTON_ID).onclick = function () {
    processAddressInput();
}