RSS
 
21. Dec. 2010

GoogleMapsV3 CakePHP Helper

21 Dec

Google Maps V2 is marked “deprecated”. V3 is supposed to be faster and more compatible to mobile browsers. Details Also new: A googlemaps key is not necessary anymore.

UPDATE: v1.1 (March 2011) – not backwards-compatible

Usage

I wanted to keep it as simple as possible (otherwise you could use the maps with plain js right away).

You may set up configs/defaults in your config file: 

$config['Google'] = array(
    'zoom' => 6,
    'lat' => 51.1,
    'lng' => 11.2,
    'type' => 'H', # Roadmap, Satellite, Hybrid, Terrain
 'size' => array('width'=>'100%', 'height'=>400),
    'staticSize' => '500x450',
);

Now you need to add the helper to the controller (or the action): 

# globally
public $helpers = array(..., 'GoogleMapV3');
# OR in the action:
public function map() {
    $this->helpers[] = 'GoogleMapV3';
    # rest of your code
}

Since there are many possible ways to include the required javascript file I formed an own method for it: 

<?php
# include Jquery 1.4
$this->Html->script('jquery'); # or wherever it is in your js folder

# include the map js code
$this->Html->script($this->GoogleMapV3->apiUrl());
 
# OR include it manually without cake (or use your own asset stuff)
echo '<script type="text/javascript" src="'.$this->GoogleMapV3->apiUrl().'"></script>';
You may also let the helper include it automatically – just pass the option “autoScript” => true to the map() method in the next step.

Now we can use it.

Interactive Maps

# init map (prints container)
echo $this->GoogleMapV3->map(array('div'=>array('height'=>'400', 'width'=>'100%')));
 
# add markers
$options = array(
    'lat' => 48.95145,
    'lng' => 11.6981,
    'icon'=> 'url_to_icon', # optional
 'title' => 'Some title', # optional
 'content' => '<b>HTML</b> Content for the Bubble/InfoWindow' # optional
);
# tip: use it inside a for loop for multiple markers
$this->GoogleMapV3->addMarker($options);
 
# print js
echo $this->GoogleMapV3->script();
You can also add windows and (custom) events. See the code for details on that.

Static Maps

These are just images. Very handy if you don’t need the js overhead. 

# markers
$markers = array(
    array('lat'=>48.2, 'lng'=>11.1),
    array('lat'=>48.1, 'lng'=>11.2, 'color' => 'green', ...)
);
# paths
$paths = array(
    array(
        'path' => array('Berlin', 'Stuttgart'),
        'color' => 'green',
    ),
    array(
        'path' => array('44.2,11.1', '43.1,12.2', '44.3,11.3', '43.3,12.3'),
    ),
    array(
        'path' => array(array('lat'=>'48.1','lng'=>'11.1'), array('lat'=>'48.4','lng'=>'11.2')), //'Frankfurt'
        'color' => 'red',
        'weight' => 10
    )
);
 
# some options and image attributes
$options = array(
    'size' => '500x400',
    'center' => true,
    'markers' => $this->GoogleMapV3->staticMarkers($markers),
    'paths' => $this->GoogleMapV3->staticPaths($paths), 
);
$attr = array(
    'title'=>'Yeah'
);
 
# now display the map image
echo $this->GoogleMapV3->staticMap($options, $attr);
 
# you can even add an url to click on
$attr['url'] = $this->GoogleMapV3->url(array('to'=>'Munich, Germany'));
echo $this->GoogleMapV3->staticMap($options, $attr);
As you can see, we can now mix lat/lng and normal addresses (which get automatically geocoded in the background).

Map Links

If you want to redirect to maps.google.com (for directions etc) you can use this method. 

# leave "from" empty for the user
$url = $this->GoogleMapV3->url(array('to'=>'Munich, Germany'));
echo $this->Html->link('Visit Me', $url, array('target'=>'_blank')
 
# coming from a posted form or whatever
$url = $this->GoogleMapV3->url(array('to'=>'Munich, Germany', 'from'=>$from));
echo $this->Html->link('Directions to me', $url, array('target'=>'_blank')

Last but not least

Other updates: - multiple paths and markers - visible scope - custom icons possible

For more examples check out the test case. It contains several more sophisticated examples.

Helper Code

While it is still under development (pending improvements), the code can be found in my github rep: github.com/dereuromark/cakephp-google-map-v3-helper

 
43 Comments

Posted by Mark in CakePHP

 

Tags: , , ,

Leave a Reply

Tip:
If you need to post a piece of code use {code type=php}...{/code}.
Allowed types are "php", "mysql", "html", "js", "css".

Please do not escape your post (leave all ", <, > and & as they are!). If you have encoded characters and need to reverse ("decode") it, you can do that here!
 

 
 
 

  1. Rajib Ahmed

    December 21, 2010 at 21:24

    Hello Mark,

    Nice one !! for the community. Hope everybody likes your effort and make use of it. :)

     

  2. Louise

    March 10, 2011 at 10:54

    Hi Mark, Thanks for your nice work on the GoogleMaps helper for CakePHP.

    I am struggling to get the test code to work. When I run the GoogeMap case case (through Simpletest), I get:

    Fatal error: Class 'MyCakeTestCase' not found in /usr/local/src/foo/app/plugins/tools/tests/cases/helpers/google_map_v3.test.php on line 6

    Grateful for any hint you can give me!

     

  3. Mark

    March 10, 2011 at 14:00

    Yes, thats my own test case (thats what my comment was about in the github rep – you cannot use my test case right away – some modifications will have to be made).

    simply take my test as a guideline and build your own from scratch :)

     

  4. Rohit Manglik

    April 2, 2011 at 13:29

    Hi mark,

    Great work.

    Thanks a lot for your previous help.

    In your code
    $options = array(
    'lat' =&gt; 48.95145,
    'lng' =&gt; 11.6981,
    'icon'=&gt; 'url_to_icon', # optional
    'title' =&gt; 'Some title', # optional
    'content' =&gt; '<b>HTML</b> Content for the Bubble/InfoWindow' # optional
    );

    I want to give Location name instead of latitude and longitude values. How can I do it? thanks a lot for your help. Is it possible to use zip code?

     

  5. Mark

    April 2, 2011 at 13:43

    thats not the way googlemaps works!
    you need to manually geocode your addresses and then use the lat/lng in the view (see geocoding behaviors!).
    there are possibilities to manually do that with JS (just in time so to speak) – but this is not recommended and will only slow things down.

     

  6. sam

    April 19, 2011 at 20:23

    hy mark thx for this helper it.s very useful for me &amp; so easy but i have one problem with geocode
    i try to use to extract the lat &amp; lng from the name of the place but i failed
    so can you give me any idea how can i use your helper to make it happen
    thx a lot &amp; i,m interesting about ur work

     

  7. Eric

    May 17, 2011 at 16:04

    Is there an example of using the clustering? I see some functions for it. Is clustering still in test or is it ready to be used? Forgive me if there is an example and I missed it.

     

  8. Mark

    May 17, 2011 at 16:33

    unfortunately I didn't have time yet to include that. but it can easily be done with customJS I believe.

     

  9. Eric

    May 17, 2011 at 19:14

    I keep getting "missing } after property list"
    when referencing "var myOptions = {zoom: 4, streetViewControl: false, navigationControl: true, mapTypeControl: true, scaleControl: true, scrollwheel: false, keyboardShortcuts: true, center: initialLocation, mapTypeId: google.maps.MapTypeId.0 };"
    This line is created in the funciton _mapOptions()

    Any idea. It all looks good to me. Thanks

     

  10. Eric

    May 17, 2011 at 20:03

    To fix the error I was getting
    “missing } after property list”

    I had to go in the the google_map_v3.php and change line 944

    Previous version:
    $res[] = 'mapTypeId: google.maps.MapTypeId.'.$type;

    New version:
    $res[] = 'mapTypeId: "google.maps.MapTypeId.'.$type.'"';

    All I did was add some quotes
    Just an FYI if anyone else has the same problem

     

  11. Mark

    May 25, 2011 at 11:38

    I was sure i fixed that in the current version. Maybe I didnt commit it yet
    Thats a known IE bug that the last comma has to be omitted.. quite annoying sometimes

     

  12. Fabricio Sodano

    June 26, 2011 at 02:40

    Hello, how are you?

    There's a particular case, where forexample, you print out the map within a hidden container (i'm using jQuery tabs in this case), and when you first show it, it's not correctly centered (center =&gt; true, doesn't fix it), and it shows a lot of grey background.

    Whenever you resize the window, it works (however, this is not an acceptable solution)

    So, I added this line:

    google.maps.event.trigger(".$this-&gt;name().", 'resize');

    after the line (372, in my file, in the map() function) which reads:

    var ".$this-&gt;name()." = new google.maps.Map(document.getElementById(\"".$this-&gt;_currentOptions['div']['id']."\"), myOptions);

    And now it works correctly. I thought I'd share. Thanks for sharing your work!

    Cheers.

     

  13. Fabricio Sodano

    June 26, 2011 at 03:00

    Actually, disregard that last comment… because I just realized that it was working because I was calling it when the tab was activated -which is actually the only way to get it to work-, so no need to update your helper.

    Cheers.

     

  14. Chloe

    July 1, 2011 at 18:28

    Hi,

    Thanks for the helper. I have a query here. I have uncommented the autoCenter option in $_defaultOptions so that the map would automatically centered at the marker.

    However, when it centers at the marker, the zoom level increased to it's maximum even though the default zoom value is set at 15 at $_defaultOptions.

    Am I doing it wrong here? Appreciate if you could help me out.

    Thank you in advance.

     

  15. Mark

    July 1, 2011 at 22:33

    If you mailed it to me – idealy as TestCase similar to the one existing – i could take a look at it.
    unfortunately i am quite busy right now to investigate it on my own.

     

  16. Bart

    July 28, 2011 at 08:54

    Hey Mark, nice rewrite! Is it also possible to create polygons and lines in a dynamic map with this helper?

     

  17. Mark

    July 28, 2011 at 11:41

    Well, via PHP it's currently out of scope. Feel free to add the functionality and make a pull request :) But you can always use custom JS code to inject into the helper. There is a method for this available.

     

  18. CakePHP : signets remarquables du 10/08/2011 au 23/08/2011 | Cherry on the...

    August 23, 2011 at 15:00

    [...] GoogleMapsV3 CakePHP Helper [...]

     

  19. heohni

    October 6, 2011 at 16:59

    Hi, I have a strange problem:

    I added the helper in the right directory.
    I added the helper into app_controller.
    I added the call to the js Script in default.ctp.
    I added the global configs, I can debug them from the helper, so they are accessable.

    When I call echo $this-&gt;GoogleMapV3-&gt;map(array('div'=&gt;array('height'=&gt;'400', 'width'=&gt;'100%')));
    and
    echo $this-&gt;GoogleMapV3-&gt;script();

    I can see the whole div – including zoom, scale, copyright and switch between map/satelite/etc

    But only a small cut out of the map, always somewhere in cech republik, regardless what lat/lng I set in the config defaults…

    I wish I could send you a screenshot.
    Did anyone had the same problems, or is it just me?

     

  20. Mark

    October 6, 2011 at 17:11

    sure that the configs are correctly set and read out from cake? that would be my guess.

    you can provide a link to an uploaded image somewhere on the web (image upload server).

     

  21. heohni

    October 7, 2011 at 08:12

    OK, it seams it has to do with opening the map in a modal dialog. I just found out that I have to add

    google.maps.event.trigger(map, 'resize');

    Can you please tell me where to add this when the map loads?

     

  22. Mark

    October 10, 2011 at 13:52

    you may add it as custom javascript.
    the method should be addCustom().

     

  23. R4D3K

    October 11, 2011 at 22:59

    Hi Mark, first thank you for you helper. Second i write this comment, because i have question: about zoom usage. I want generate simple map whitch 1 marker so i do in view

    GoogleMapV3-&gt;map(array('div'=&gt; array('id'=&gt; 'google_map', 'height'=&gt; 250, 'width'=&gt; 450), 'zoom'=&gt; 10));
    $this-&gt;GoogleMapV3-&gt;addMarker(array(
    'lat'=&gt; 52.229387,
    'lng'=&gt; 20.99076
    ));
    echo $this-&gt;GoogleMapV3-&gt;script();
    ?&gt;

    Thic code generate maps with marker but is not centering maps on the marker. So i do that:

    $this-&gt;GoogleMapV3-&gt;addMarker(array(
    'lat'=&gt; 52.229387,
    'lng'=&gt; 20.99076,
    'autoCenter=&gt; true
    ));

    Now the map is centered but zoom is max even I write 'zoom'=&gt; 15. I think that is a bug,

     

  24. Mark

    October 12, 2011 at 12:29

    i reproduced your steps.
    it is more a google maps bug. with autoCenter=>true the zoom is omitted and the map tries to find the "best" zoom value. for a single marker, though, it uses max zoom which might not be the best thing here.

    to avoid this issue always submit a default lat/lng (either in configs or in your initialization in map():
    array('lat=>$lat, 'lng'=>$lng, …)

    also note that the initialization is done before any markers are set. so if you want your single marker to be the center (which your custom zoom value), use those lat/lng values as the above default values.

     

  25. R4D3K

    October 13, 2011 at 13:33

    Thank you for help.

    echo $this-&gt;GoogleMapV3-&gt;map(array(
    'div'=&gt; array('id'=&gt; 'google_map', 'height'=&gt; 250, 'width'=&gt; 450),
    'zoom'=&gt; 15,
    'lat'=&gt; 52.229387,
    'lng'=&gt; 20.99076,
    ));
    $this-&gt;GoogleMapV3-&gt;addMarker(array(
    'lat'=&gt; 52.229387,
    'lng'=&gt; 20.99076,
    ));
    echo $this-&gt;GoogleMapV3-&gt;script();

    I paste this code for other visitors who have the same problem.

     

  26. Mark

    October 13, 2011 at 13:53

    works for me. did you use the current version of the script?
    you sure that no configure settings ("Google") interfere?

     

  27. R4D3K

    October 13, 2011 at 19:14

    Yeap this code too worls for me. I paste this code for another people who want see example for the most popular use google maps.

     

  28. Mark

    October 13, 2011 at 19:30

    ah – now I understand you! :)
    all right.

     

  29. Zaharia Constantin

    October 19, 2011 at 19:45

    hi, please help me with a problem,
    i am using this helper with jquery ui tabs, and i can't display corectly Gmap.
    Map is located in the secound tab, and when the tab is visible, is displayed only few piexels.
    the controls of the map, are display ok, but the mas only few pixel in the top left corner.
    any ideea?

     

  30. Mark

    October 19, 2011 at 19:49

    I guess you need to force the width and height of the div container via css or inline width/height settings.

     

  31. Zaharia Constantin

    October 19, 2011 at 20:18

    is not working, seams that is a problem between jquery ui tabs, and gMap. a resize problem on the hiden div.
    do you have a fix on this matter?

     

  32. Zaharia Constantin

    October 22, 2011 at 19:51

    i have the same problem , but now in ui dialog, has anyone enconter this problem?

    how i do resize using js, after dialog is open or tab is visbile?
    i have found the google.maps.event.trigger(map, ‘resize’);
    is the solution, but how i insert this in the script?

     

  33. carlos

    November 29, 2011 at 18:27

    Hi Mark. I´m trying to use the code but i have this line" Map cannot be displayed!" What i´m doing wrong?

     

  34. Mark

    November 29, 2011 at 18:35

    Not much to go on with your description. Please debug using Firefox and the Firebug extension. It will give you all js errors occurring.

     

  35. Heather

    January 10, 2012 at 18:47

    Mark, this is a great helper, but do you have any plans for adding sidebar support?

     

  36. Mark

    January 10, 2012 at 18:58

    Good question.
    I always used the available tools and some custom js to produce that. It would be worth making it a little bit more sophisticated. Currently I don't have time for it, though. Maybe someone wants to do that?
    Feel free to fork the project at github and open a poll request for it if you successed.

     

  37. Heather

    January 24, 2012 at 20:54

    Mark,
    I am having trouble getting my $options array to work. I can get a marker at the lat and lng I specify, but the map won't center over these coordinates, and it won't zoom to that level (it will work if I set them in the php file as a default so I know there is not a problem with my coordinates or zoom level). It's like the options I set don't override the default values in the original helper file. Any advice?

     

  38. Mark

    January 24, 2012 at 22:20

    did you try to set them via "map" key?
    'map'=>array('lat'=>…, 'lng'=>…)
    ?
    you will need to show some code

     

  39. Heather

    January 24, 2012 at 23:13

    Using an array in map() worked for me. Thank you.

     

  40. Charles Quenneville

    January 29, 2012 at 18:35

    I'm a beginner at the whole thing, so sorry if the question is obvious.
    Is there a way to set the map's setting without having a config file for $config['Google']? I want to set the map's zoom level in the view. I tried 

    echo $this->GoogleMapV3->map(array('div'=>array('height'=>'400', 'width'=>'600'), 'map'=>array('zoom'=>3)));

    or Configure::write('Google.zoom', 3); just before invoking map but that value seems to be overwritten by _defaultOptions.
    Thanks for the helper!

     

  41. Mark

    January 29, 2012 at 19:09

    yes, that should definitely be possible – both ways you describe. I will look into that.

     

  42. Charles Quenneville

    February 11, 2012 at 17:06

    I made a little change to the _autoCenter function to limit its zoom (there's probably a better solution and it should use a constant as a maximum zoom but….):

    protected function _autoCenter() {
		return '
		var bounds = new google.maps.LatLngBounds();
		$.each(gMarkers'.self::$MAP_COUNT.',function (index, marker) { bounds.extend(marker.position);});
		if ('.self::$MARKER_COUNT.'>1)
		 {
		  '.$this->name().'.fitBounds(bounds);
		 }
		else
		 {map'.self::$MAP_COUNT.'.setCenter(bounds.getCenter());
    map'.self::$MAP_COUNT.'.setZoom(17);
		 }
		';
	}
     

  43. Charles Quenneville

    February 11, 2012 at 17:10

    The problem I had with the default maps was that it displayed all the businesses with popups and links to their google place pages which I really didn't want. So I basically added this to the map options (featureType can be a dozen different options, I chose not to display any poi but you can choose not to display poi.business only for example):

    {styles:
    [
        {
            featureType: "poi",
            elementType: "labels",
            stylers:
            [
                {
                    visibility: "off"
                }
            ]
        }
    ]