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:
{code type=php}
$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',
);
{/code}
Now you need to add the helper to the controller (or the action):
{code type=php}
# globally
public $helpers = array(..., 'GoogleMapV3');
# OR in the action:
public function map() {
$this->helpers[] = 'GoogleMapV3';
# rest of your code
}
{/code}
Since there are many possible ways to include the required javascript file I formed an own method for it:
{code type=php}
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
