How to integrate Google Map in Cakephp 3.x

Need Help
1

Hi there,

I’m quite new and unexperienced in using Cakephp (Version 3.4.2), but working myself through it. For an application I want to integrate Google Map, and for the first step all Im asking for is a simple Map, but the problem keeps me busy now for 3 days… I downloaded the marcferna CakePHP-GoogleMapHelper for Cakephp 3.x, and followed the installation guide. But instead of a map all im receiving is Fatal Error Excpetion “Error: Unsupported operand types” "File C:\xampp\htdocs\cakephp\bookmarks\vendor\cakephp\cakephp\src\View\Helper\HtmlHelper.php Line: 530 "

   public function script($url, array $options = [])
    {
        $defaults = ['block' => null, 'once' => true];
        $options += $defaults;   //Line 530

        if (is_array($url)) {
            $out = '';
            foreach ($url as $i) {
                $out .= "\n\t" . $this->script($i, $options);
            }
            if (empty($options['block'])) {
                return $out . "\n";
            }

            return null;
        }

My problem is that I dont even understand the Errormessage and what Im doing wrong or what to do instead.

I would be very happy about a little guidance (I know there are already similar questions but unfortunately it didnt help me), so that I can understand how to integrate a map in my view.

Thank you!

2

I do not know that helper, but you can integrate Google Maps without that. What do you want to achieve? I may help.

3

Hi rrd,
thanks for ur reply.
Well in the end I want to achieve a dynamic map with markers which is related to addresses saved in my database, but right now I would be happy we a simple map already and actually started with the “HelloWorld”-Google Map code, that is given on the google developers side. Then I came across the Cakephp-GoogleMap Helper, but as u can see, I wasnt successful so far, because I havent understood what these kind of Helper is doing for me, obviously.

If I dont need that helper, even better. But how do I include the map into my view? I thought I could just include the js-script into my webroot-file and then link to it from my view.ctp?

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
5

Here is an old but more or less accurate article: https://webdesign.tutsplus.com/tutorials/getting-creative-with-the-google-maps-api--webdesign-13380

6

Hello rrd,

thank u so much for ur effort. The link is great, even it’s old already, but still very useful.
I pasted ur code into my cakephp-files. Unfortunately, Im not seeing a map, but this code "id : “1”,
name : “G11”,
lat : 46.570663,
lng : 17.69843,
price : 18000,
status : {
icon : “payed”,
name : “Free”
},
usr : “Gauranga-17”,"
in my browser. Also after using the firebug I didnt really understand the reason.

I was thinking about using the code from the tutorial u posted, so I created a js-file in my webroot and calling the file in my index.ctp
<?php
$this->Html->script(
[
‘https://maps.googleapis.com/maps/api/js?key=YourAPIKeyHere’,
‘map.js’
]
);
?>

but im not seeing any map or an error message.
It’s driving me nuts that Im having so much difficulties with a simple map.

7

My fault, sorry.

print $this->Html->scriptEnd(); should be not at the beggining, but right before print $this->Html->script(['jquery-3.1.1.min.js

The other important thing is that the div in your view - in my example is festival-map should be referenced in your js file - in my example tent.js document.getElementById('festival-map'),

Good luck and feel free to ask more help :slight_smile:

8

Hello rrd,

Im very sorry for my late reply. Got kind of distracted with different problems around my application.
Just wanted to let u know the map code worked out great! Thank you so much again for your help and effort!

9

Hi DanAlexa, did you get the “marcferna CakePHP-GoogleMapHelper for Cakephp 3.x” working?
whithout HtmlHelper.php errors.
thanks.

10

Hey filipe,

nope I didnt, also not the Helper from Euromark. Actually I wasted lots of time with this, trying to figure out why it is not working at all, but until now I dont know.

11

DanAlexa… I succeeded by removing the second argument from these two lines (false).

original:

<?= $this->Html->script("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", false); ?> <?= $this->Html->script("http://maps.google.com/maps/api/js?sensor=false", false); ?>

after:

<?= $this->Html->script("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); ?> <?= $this->Html->script("http://maps.google.com/maps/api/js?sensor=false"); ?>

It’s working. thank you