<?php
echo $this->Html->css('maptest.css');
echo $this->Html->script('https://maps.googleapis.com/maps/api/js?key=##############################&callback=initMap');
echo $this->Html->script('maptest.js');

echo '<div id="map"></div>';
?>

webroot/css/maptest.css

#map {
    height: 300px;
    width: 300px;
}

webroot/css/maptest.js

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

選択された場所を選ぶ

<?php
echo $this->Html->css('maptest.css');
echo $this->Html->script('https://maps.googleapis.com/maps/api/js?key=#####################&callback=initMap');
echo $this->Html->script('maptest.js');

echo '<div id="map"></div>';


// Formオプションを指定する
$formOptions = [
    'type'      =>'post',
    'action'    =>'register',
];

// Formの名前を指定する
$formName = "MyFormName";

// Formを作成する
echo $this->Form->create($formName, $formOptions);

echo $this->Form->input('lat', [
    'label'            => '緯度',
    'placeholder'   => '緯度が入力されます', 
    'id'            => 'lat', 
]);

echo $this->Form->input('lon', [
    'label'            => '経度',
    'placeholder'   => '経度が入力されます', 
    'id'            => 'lon', 
]);

echo $this->Form->end();

?>

function initMap(){

    // Map
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.490085,  lng: 139.930946},
        zoom: 15
    });

    // Marker
    var selectedMarker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng( 37.490085, 139.930946 )
    });

    // Event
    google.maps.event.addListener(map, 'click', function(event)
    {
        selectedMarker.position = event.latLng;
        selectedMarker.setMap(map);

        document.getElementById('lat').value = event.latLng.lat(); 
        document.getElementById('lon').value = event.latLng.lng(); 
    })

}