How to integrate Google Map in Cakephp 3.x

Need Help
4

I have done the following.

In your template file:

<?php
$this->Html->scriptStart(['block' => true]);
print $this->Html->scriptEnd();
print 'var tents = [{
        id : "1",
        name : "G11",
        lat : 46.570663, 
        lng : 17.69843, 
        price : 18000,
        status : {
                    icon : "payed",
                    name : "Free"
                },
        usr : "Gauranga-17",
    },{
        id : "2",
        name : "G13",
        lat : 46.570781, 
        lng : 17.698411, 
        price : 18000,
        status : {
                    icon : "payed",
                    name : "Booked"
                },
        usr : "Gauranga-21",
    }]';
print $this->Html->script(
    [
        'jquery-3.1.1.min.js',
        'jquery-ui.min.js',
        'https://maps.googleapis.com/maps/api/js?key=YourAPIKeyHere',
        'tents.js'
    ],
    ['block' => true]
);
?>
<div id="festival-map"></div>

tents.js

(function($) {
    $(function () {
        var map = new google.maps.Map(
            document.getElementById('festival-map'),
            {
                center: new google.maps.LatLng(46.570, 17.6985),
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                maxZoom: 22,
                minZoom: 16,
            }
        );

        new google.maps.Marker({
            position: new google.maps.LatLng(46.57139279399073, 17.69848108291626),
            map: map,
            title: 'Holy Cows',
            icon: '../img/marker.png'
        });

        var parkingPlace = new google.maps.Polygon({
            paths: [
                {lat: 46.57005042901576, lng: 17.689651250839233},
                {lat: 46.57036020849727, lng: 17.69094944000244},
                {lat: 46.574055298740554, lng: 17.690134048461914},
                {lat: 46.57369391379595, lng: 17.68875002861023},
            ],
            strokeColor: '#ff0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#4285F4',
            fillOpacity: 0.35
        });
        parkingPlace.setMap(map);
        new google.maps.Marker({
            position: new google.maps.LatLng(46.572167220209856, 17.689661979675293),
            map: map,
            title: 'Parkoló',
            icon: '../img/marker.png'
        });

        var marker = new google.maps.Marker({
            map: map
        });

        $.each(tents, function (i, value) {
            var tent = new google.maps.Marker({
                position: new google.maps.LatLng(value.lat, value.lng),
                icon: '../img/' + value.status.icon + '.png',
                map: map,
                tid: value.id,
                name: value.name,
                usr: value.usr,
                price: value.price,
                status: value.status.name,
            });
            google.maps.event.addListener(tent, 'mouseover', function () {
                //do something here
            });
            tents[i] = tent;
        });

        map.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('legend-map'));

    });
})(jQuery);

Perhaps this is just an example to use :slight_smile: You may need more or less than this.

2 Likes