/concrete/blocks/google_map/form_setup_html.php

<?php
defined('C5_EXECUTE') or die('Access Denied.');

/* @var Concrete\Core\Form\Service\Form $form */
/* @var string $title */
/* @var string $location */
/* @var string $latitude */
/* @var string $longitude */

/* @var int $zoom */
/* @var string $width */
/* @var string $height */
/* @var int $scrollwheel */

if (!isset($title)) {
    $title = '';
}
if (!isset($location)) {
    $location = '';
}
if (!isset($location)) {
    $location = '';
}
if (!isset($latitude)) {
    $latitude = '';
}
if (!isset($longitude)) {
    $longitude = '';
}
if (empty($zoom)) {
    $zoom = 14;
}
if (!isset($width)) {
    $width = '100%';
}
if (!isset($height)) {
    $height = '400px';
}
$scrollwheel = !empty($scrollwheel);
?>

<div class="ccm-google-map-block-container row">
    <div class="col-xs-12">
        <div class="form-group">
            <?= $form->label('apiKey', t('API Key') . ' <i class="fa fa-question-circle launch-tooltip" title="' . t('The API Key must be enabled for Google Maps and Google Places.') . "\n" . t('API keys can be obtained in the Google Developers Console.') . '"></i>') ?>
            <div class="input-group">
                <?= $form->text('apiKey', Config::get('app.api_keys.google.maps')) ?>
                <span class="input-group-btn">
                    <a id="ccm-google-map-check-key" class="btn btn-default" href="#">
                        <?= t('Check') ?>
                        &nbsp;
                        <i id="ccm-google-map-check-key-spinner" class="fa fa-play"></i>
                    </a>
                </span>
            </div>
            <div id="block_note" class="alert alert-info" role="alert"><?= t('Checking API Key...') ?></div>
        </div>

        <div class="form-group">
        </div>

        <div class="form-group">
            <?= $form->label('title', t('Map Title (optional)')) ?>
            <?= $form->text('title', $title) ?>
        </div>

        <div id="ccm-google-map-block-location" class="form-group">
            <?= $form->label('location', t('Location')  . ' <i class="fa fa-question-circle launch-tooltip" title="' . t('Start typing a location (e.g. Apple Store or 235 W 3rd, New York) then click on the correct entry on the list.') . '"></i>') ?>
            <?= $form->text('location', $location) ?>
            <?= $form->hidden('latitude', $latitude) ?>
            <?= $form->hidden('longitude', $longitude) ?>
            <div id="map-canvas"></div>
        </div>
    </div>

    <div class="col-xs-4">
        <div class="form-group">
            <?= $form->label('zoom', t('Zoom')) ?>
            <?php
            $zoomLevels = range(0, 21);
            $zoomArray = array_combine($zoomLevels, $zoomLevels);
            ?>
            <?= $form->select('zoom', $zoomArray, $zoom) ?>
        </div>
    </div>

    <div class="col-xs-4">
        <div class="form-group">
            <?= $form->label('width', t('Map Width')) ?>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-arrows-h"></i></span>
                <?= $form->text('width', $width) ?>
            </div>
        </div>
    </div>

    <div class="col-xs-4">
        <div class="form-group">
            <?= $form->label('height', t('Map Height')) ?>
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-arrows-v"></i></span>
                <?= $form->text('height', $height) ?>
            </div>
        </div>
    </div>

    <div class="col-xs-12">
        <div class="form-group">
            <div class="checkbox">
                <label>
                <?= $form->checkbox('scrollwheel', 1, $scrollwheel) ?>
                <?= t('Enable Scroll Wheel') ?>
                </label>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
'use strict';

var $key = $('#apiKey'),
    $location = $('#ccm-google-map-block-location > input[id="location"]'),
    $note = $("#block_note");

var setupApiKey = (function() {
    var $checkSpinner = $('#ccm-google-map-check-key-spinner'),
        checking = false,
        $script = null,
        originalGMAuthFailure = window.gm_authFailure,
        lastKey = null,
        lastKeyError = null,
        autocomplete = null;

    function setAutocompletion(places) {
        if (autocomplete) {
            $location.removeAttr('placeholder autocomplete disabled style').removeClass('gm-err-autocomplete notfound');
            google.maps.event.removeListener(autocomplete.listener);
            google.maps.event.clearInstanceListeners(autocomplete.autocomplete);
            clearInterval(autocomplete.pacTimer);
            $('.pac-container').remove();
            $location.off('change');
            autocomplete = null;
        }
        if (!places) {
            return;
        }
        autocomplete = {
            autocomplete: new google.maps.places.Autocomplete($location[0])
        }
        autocomplete.listener = google.maps.event.addListener(autocomplete.autocomplete, 'place_changed', function () {
            if (autocomplete === null) {
                return;
            }
            var place = autocomplete.autocomplete.getPlace();
            if (!place.geometry) {
                $location.addClass('notfound');
                $note.text(<?= json_encode(t('The place you entered could not be found.')) ?>).removeClass('alert-info alert-success').removeClass('alert-danger').css('visibility', '');
            } else {
                $('#ccm-google-map-block-location > input[id=latitude]').val(place.geometry.location.lat());
                $('#ccm-google-map-block-location > input[id=longitude]').val(place.geometry.location.lng());
                $location.removeClass('notfound');
                $note.css('visibility', 'hidden');
            }
        });
        $location.on('change', function() {
            $location.addClass('notfound');
        });
        autocomplete.pacTimer = setInterval(function () {
            $('.pac-container').css('z-index', '2000');
            if ($('#ccm-google-map-block-location > input[id="location"]').length === 0) {
                setAutocompletion(null);
            }
        }, 250);
    }

    return function(onSuccess, onError, forceRecheck) {
        if (checking) {
            onError(<?= json_encode(t('Please wait, operation in progress.')) ?>);
            return;
        }
        if (!onSuccess) {
            onSuccess = function() {};
        }
        if (!onError) {
            onError = function() {};
        }
        var key = $.trim($key.val());
        if (key === lastKey && !forceRecheck) {
            if (lastKeyError === null) {
                onSuccess();
            } else {
                onError(lastKeyError);
            }
            return;
        }
        function completed(places) {
            setAutocompletion(places);
            if (lastKeyError === null) {
                onSuccess();
            } else {
                onError(lastKeyError);
            }
        }
        setAutocompletion();
        checking = true;
        if ($script !== null) {
            $script.remove();
            $script = null;
        }
        var scriptLoadedFunctionName;
        for (var i = 0; ; i++) {
            scriptLoadedFunctionName = '_ccm_gmapblock_loaded_' + i;
            if (typeof window[scriptLoadedFunctionName] === 'undefined') {
                break;
            }
        }
        
        function scriptLoaded(error) {
            delete window[scriptLoadedFunctionName];
            function placesLoaded(error, places) {
                if (originalGMAuthFailure) {
                    window.gm_authFailure = originalGMAuthFailure;
                } else {
                    delete window.gm_authFailure;
                }
                $checkSpinner.removeClass('fa-refresh fa-spin').addClass('fa-play');
                lastKey = key;
                lastKeyError = error;
                setTimeout(function() {
                    checking = false;
                    completed(places)
                }, 10);
            }
            if (error !== null) {
                placesLoaded(error);
                return;
            }
            var places = new google.maps.places.PlacesService(document.createElement('div'));
            window.gm_authFailure = function() {
                placesLoaded(<?= json_encode(t('The API Key is NOT valid.')) ?>);
            };
            places.getDetails(
                {
                    placeId: 'ChIJJ3SpfQsLlVQRkYXR9ua5Nhw'
                },
                function(place, status) {
                    if (status === 'REQUEST_DENIED') {
                        placesLoaded(<?= json_encode(t('The API Key is NOT valid for Google Places.')) ?>);
                    } else {
                        placesLoaded(null, places);
                    }
                }
            );
        }

        window[scriptLoadedFunctionName] = function() {
            scriptLoaded(null);
        };
        window.gm_authFailure = function() {
            scriptLoaded(<?= json_encode(t('The API Key is NOT valid.')) ?>);
        };
        $checkSpinner.removeClass('fa-play').addClass('fa-refresh fa-spin');
        $(document.body).append($script = $('<' + 'script src="https://maps.googleapis.com/maps/api/js?key=' + encodeURIComponent(key) + '&libraries=places&callback=' + encodeURIComponent(scriptLoadedFunctionName) + '"></' + 'script>'));
    };
})();

$key.on('change keydown keypress', function() {
    $note.html('&nbsp;').css('visibility', 'hidden');
});
$('#ccm-google-map-check-key')
    .on('click', function(e) {
        e.preventDefault();
        $note.text(<?= json_encode(t('Checking API Key...')) ?>).removeClass('alert-success alert-danger').addClass('alert-info').css('visibility', '');
        setupApiKey(
            function() {
                $note.text(<?= json_encode(t('The API Key is valid.')) ?>).removeClass('alert-info alert-danger').addClass('alert-success');
            },
            function(err) {
                $note.text(err).removeClass('alert-success alert-info').addClass('alert-danger');
            },
            true
        );
    })
    .trigger('click')
;

$location.on('keydown', function(e) {
    if (e.keyCode === 13) {
        e.preventDefault();
    }
});

}());
</script>