Question

I am using the Cakephp Google Map V3 Helper. I can get the google map to show up but the markers do not. Here is my view code:

    <?php 
echo $this->GoogleMapV3->map();
foreach ($allcondos as $condo) {
    $options = array(
    'lat' => $condo['Unit']['lat'],
    'lng' => $condo['Unit']['lon']
    );
    $this->GoogleMapV3->addMarker($options);
}
?>

I know that if I just tell the app to echo out my $condo[‘Unit’][‘lat’] or [‘lon’] it will do so in the foreach loop (so it is pulling my data). What I don’t know how to do is how to write the code for the $options array. I have also tried this:

    foreach ($allcondos as $condo) {
    $lat=$condo['Unit']['lat'];
    $lon=$condo['Unit']['lon'];
    $options = array(
    'lat' => $lat,
    'lng' => $lon
    );
    $this->GoogleMapV3->addMarker($options);
}

How do I write this correctly?

Answer 1

A couple easy steps to get this to work:

Download

Download from https://github.com/dereuromark/cakephp-google-map-v3-helper and place the GoogleMapV3Helper.php file in /app/view/helper/GoogleMapV3Helper.php.

Load Helper

Either modify your appcontroller so that the top of it reads like the following:

<?php   
    class AppController extends Contoller{
        public $helpers = array('Html','Javascript','GoogleMapV3');
    }   
?>

Or load it in a single controller by adding it to the helpers array as such:

<?php   
    class DemoController extends AppContoller{

        function map() {
            $this->helpers[] = 'GoogleMapV3';
            #   rest of your code       
        }
    }   
?

Include Scripts

Include Jquery in your header. Include the following as well:

<?php
    echo '<script type="text/javascript" src="'.$this->GoogleMapV3->apiUrl().'"></script>';
?>

Create Map Container

Put this in your view where you want your map to appear. Feel free to modify the properties of the div.

<?php echo $this->GoogleMapV3->map(array('div'=>array('id'=>'my_map', 'height'=>'400', 'width'=>'100%'))); ?>

Note: you can change the default position of the map by including more options than just ‘div’:

<?php echo $this->GoogleMapV3->map(array('map'=>array(
            'defaultLat' => 40, # only last fallback, use Configure::write('Google.lat', ...); to define own one
            'defaultLng' => -74, # only last fallback, use Configure::write('Google.lng', ...); to define own one
            'defaultZoom' => 5,
        ),'div'=>array('id'=>'my_map', 'height'=>'400', 'width'=>'100%'))); ?>

Add markers

Can be in a loop or whatever, but this is done in the view after your container is created.

<?php  
    $options = array(
    'lat'=>40.770272,
    'lng'=>-73.974037,
        'title' => 'Some title', # optional
        'content' => '<b>HTML</b> Content for the Bubble/InfoWindow' # optional
    );
    $this->GoogleMapV3->addMarker($options);
?>

note: only set the ‘icon’ key in the array if you want to use a custom image. Otherwise, they will not show up.

Include the script for the markers

<?php echo $this->GoogleMapV3->script() ?>

All done!

Alternately, you can use finalize() instead of script() if you do not want to echo the javascript right away, but write it to the buffer for later output in your layout:

<?php $this->GoogleMapV3->finalize(); ?>

See http://www.dereuromark.de/2010/12/21/googlemapsv3-cakephp-helper/ for details.