How to integrate Google Map in Cakephp 3.x

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!

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

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?

I have done the following.

In your template file:

$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(
    ['block' => true]
<div id="festival-map"></div>


(function($) {
    $(function () {
        var map = new google.maps.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
        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.lng),
                icon: '../img/' + value.status.icon + '.png',
                map: map,
                usr: value.usr,
                price: value.price,
            google.maps.event.addListener(tent, 'mouseover', function () {
                //do something here
            tents[i] = tent;



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


Here is an old but more or less accurate article:

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

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.

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:

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!

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

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.

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


<?= $this->Html->script("//", false); ?> <?= $this->Html->script("", false); ?>


<?= $this->Html->script("//"); ?> <?= $this->Html->script(""); ?>

It’s working. thank you