marcferna / cakephp-googlemaphelper

Helper for CakePHP framework that integrates a Google Map in your view using Google Maps API V3

Google Maps for CakePHP 2.x

Helper for CakePHP framework that integrates a Google Map in your view using Google Maps API V3.

CakePHP3

You can find a working version for CakePHP 3 in the branch CakePHP3: https://github.com/marcferna/CakePHP-GoogleMapHelper/tree/CakePHP3

##Demo See all the examples live here

Installation

1. Place the helper into app/View/Helper/GoogleMapHelper.php

2. Add this line into the controller:

public $helpers = array('GoogleMap');   //Adding the helper

3. Then we need to add the necessary Javascript files into the view:

<?= $this->Html->script('http://maps.google.com/maps/api/js?sensor=true', false); ?>

Note that the API key is not required but it you may want to add it if you want to monitor your usage or to buy additional usage quota. To add the api key:

<?= $this->Html->script('http://maps.google.com/maps/api/js?key=YOUR_API_KEY&sensor=true', false); ?>

Usage

Print the map to your view

<?= $this->GoogleMap->map(); ?>

Map Options

Below are the options available to set to your map:

• id: Map canvas id
• width: Map width
• height: Map height
• style: Map canvas CSS style
• zoom: Map zoom
• type: Type of map - ROADMAP, SATELLITE, HYBRID or TERRAIN
• custom: Any other map option not mentioned before and available for the map. For example mapTypeControl: true. See more map options at: https://developers.google.com/maps/documentation/javascript/controls
• localize: Boolean to localize your position or not. Overrides 'latitude' & 'longitude' and 'address' (Localize have priority versus Latitude & Longitude and Address)
• latitude: Default latitude if the browser doesn't support localization or you don't want localization (Latitude & Langitude have priority versus Address)
• longitude: Default longitude if the browser doesn't support localization or you don't want localization (Latitude & Langitude have priority versus Address)
• address: Default address if the browser doesn't support localization or you don't want localization (Latitude & Langitude have priority versus Address)
• marker: Boolean to put a marker in your position or not
• markerTitle: Marker title (HTML title tag)
• markerIcon: Default icon of the marker of your position
• markerShadow: Default icon' shadow of the marker of your position
• infoWindow: Boolean to show an information window when you click your position marker or not
• windowText: Default text inside your position marker´s information window
• draggableMarker: Indicator if marker will be draggable

In order modify any of the default options shown above you need to create your map passing the array as follows:

<?
  // Override any of the following default options to customize your map
  $map_options = array(
    'id' => 'map_canvas',
    'width' => '800px',
    'height' => '800px',
    'style' => '',
    'zoom' => 7,
    'type' => 'HYBRID',
    'custom' => null,
    'localize' => true,
    'latitude' => 40.69847032728747,
    'longitude' => -1.9514422416687,
    'address' => '1 Infinite Loop, Cupertino',
    'marker' => true,
    'markerTitle' => 'This is my position',
    'markerIcon' => 'http://google-maps-icons.googlecode.com/files/home.png',
    'markerShadow' => 'http://google-maps-icons.googlecode.com/files/shadow.png',
    'infoWindow' => true,
    'windowText' => 'My Position',
    'draggableMarker' => false
  );
?>

<?= $this->GoogleMap->map($map_options); ?>

Markers

To add a marker use:

<?= $this->GoogleMap->addMarker($map_id, $marker_id, $position); ?>

Where:

• $map_id is the map canvas id ('map_canvas' by default)
• $marker_id is the unique identifiyer for that marker
• $position could be a simple string with the address or an array with latitude and longitude.

Example with address (using geolocation)

<?= $this->GoogleMap->addMarker("map_canvas", 1, "1 Infinite Loop, Cupertino, California"); ?>

Example with latitude and longitude

<?= $this->GoogleMap->addMarker("map_canvas", 1, array('latitude' => 40.69847, 'longitude' => -73.9514)); ?>

Marker Options

There are some marker options available to customize the marker popup info window:

• showWindow: Boolean to show or not the popup info window
• windowText: Text to show inside the popup info window
• markerTitle: Marker title (HTML title tag)
• markerIcon: Marker icon
• markerShadow: Marker icon shadow
• draggableMarker: Indicator if marker will be draggable

In order modify any of the default options shown above you need to create your marker passing the array as follows:

<?
  // Override any of the following default options to customize your marker
  $marker_options = array(
    'showWindow' => true,
    'windowText' => 'Marker',
    'markerTitle' => 'Title',
    'markerIcon' => 'http://labs.google.com/ridefinder/images/mm_20_purple.png',
    'markerShadow' => 'http://labs.google.com/ridefinder/images/mm_20_purpleshadow.png',
    'draggableMarker' => true
  );
?>

<?= $this->GoogleMap->addMarker("map_canvas", 1, "1 Infinite Loop, Cupertino, California", $marker_options); ?>

Draggable Marker

To access the draggable marker's coordinates include an element in the html with the id of the marker. If a draggable marker with id of 1 is added, the coordinates can be accessed like:

<input type="text" id="latitude_1" />
<input type="text" id="longitude_1" />

Directions

To add a route between two points use:

<?= $this->GoogleMap->getDirections($map_id, $id, $position); ?>

Where:

• $map_id is the map canvas id ('map_canvas' by default)
• $id is the unique identifiyer for that route
• $position array with from and to addresses

Example:

<?= $this->GoogleMap->getDirections("map_canvas", "directions1", array("from" => "Lake Tahoe", "to" => "San Francisco")); ?>

Directions Options

There are some directions options available to customize:

• travelMode: Travel mode (DRIVING, BICYCLING, TRANSIT, WALKING)
• directionsDiv: Div ID to dump the step by step directions (The div needs to be before the getDirections() call)

In order modify any of the default options shown above you need pass the array as follows:

<?
  // Override any of the following default options to customize your route
  $directions_options = array(
    'travelMode' => "WALKING",
    'directionsDiv' => 'directions',
  );
?>
<div id="directions"></div>
<?= $this->GoogleMap->getDirections("map_canvas", "directions1", array("from" => "Lake Tahoe", "to" => "San Francisco"), $directions_options); ?>

Polylines

To draw a line between to points use:

<?= $this->GoogleMap->addPolyline($map_id, $id, $position); ?>

Where:

• $map_id is the map canvas id ('map_canvas' by default)
• $id is the unique identifiyer for that polyline
• $position array with start and end coordinates (geolocation not suppoerted yet)

Example:

<?= $this->GoogleMap->addPolyline("map_canvas", "polyline", array("start" => array("latitude" =>37.772323 ,"longitude"=> -122.214897), "end" => array("latitude" =>21.291982 ,"longitude"=> -157.821856))); ?>

Polylines Options

There are some drawing options available to customize:

• strokeColor: Specifies a hexadecimal HTML color of the format "#FFFFFF". The Polyline class does not support named colors.
• strokeOpacity: Specifies a numerical fractional value between 0.0 and 1.0.
• strokeWeight: Specifies the weight of the line's stroke in pixels.

In order modify any of the default options shown above you need to create your polyline passing the array as follows:

<?
  // Override any of the following default options to customize your polyline
  $options = array(
    "strokeColor" => "#FFFFFF",
    "strokeOpacity" => 1,
    "strokeWeight" => 8
  );
?>
<?= $this->GoogleMap->addPolyline("map_canvas", "polyline", array("start" => array("latitude" => 37.772323 ,"longitude" => -122.214897), "end" => array("latitude" => 21.291982 , "longitude" => -157.821856)), $options); ?>

Circles

To draw a circle around a point use:

<?= $this->GoogleMap->addCircle($map_id, $id, $center, $radius=100); ?>

Where:

• $map_id is the map canvas id ('map_canvas' by default)
• $id is the unique identifiyer for that circle
• $center array with the center latitude and longitude coordinates (geolocation not suppoerted yet)
• $radius specifies the radius of the circle, in meters. Defaults to 100 meters

Example:

<?= $this->GoogleMap->addCircle("map_canvas", "circle1", array('latitude' => 40.70894620592961, 'longitude' => -73.93882513046293)); ?>

Circle Options

There are some drawing options available to customize:

• strokeColor: Specifies a hexadecimal HTML color of the format "#FFFFFF". The Circle class does not support named colors.
• strokeOpacity: Specifies a numerical fractional value between 0.0 and 1.0.
• strokeWeight: Specifies the weight of the line's stroke in pixels.
• fillColor: Specifies a hexadecimal HTML color of the format "#FFFFFF". The Circle class does not support named colors.
• fillOpacity: Specifies a numerical fractional value between 0.0 and 1.0.

In order modify any of the default options shown above you need to create your circle passing the array as follows:

<?
  // Override any of the following default options to customize your circle
  $options = array(
    "strokeColor" => "#FFFFFF",
    "strokeOpacity" => 1,
    "strokeWeight" => 5,
    "fillColor" => "#E2252D",
    "fillOpacity" => 0.3
  );
?>
<?= $this->GoogleMap->addCircle("map_canvas", "circle1", array('latitude' => 40.70894620592961, 'longitude' => -73.93882513046293), 1000, $options); ?>

cakephp-googlemaphelper's Issues

Feature request - GPS Location

GPS location of user. The user may be on mobile device.

Here is a function I made a long time ago as reference:
tryGeolocation: function () {
// Try HTML5 geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
Maps.LatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
Maps.geocoder.geocode({ 'latLng': Maps.LatLng}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
Maps.map.setCenter(results[0].geometry.location);
Maps.geoMarker = new google.maps.Marker({
map: Maps.map,
position: results[0].geometry.location
}),
city = results[0].address_components[2].short_name;
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}, function (e) {
alert(e.message);
});
} else {
alert('couldn't find location');
}
},

How to initialize marker in my position or by clicking on the map

Hello! thanks for this helper! it's very helpful!
I just want to create a function which allow to take the my position as the default position on the marker. Or make a function which allow to initialize the marker position by clicking somwhere in the map! (appologize my bad english)

AppHelper Not found

Hi,

I'm writing here hoping for an quick answer please :x When I Extend Apphelper with GoogleMapHelper, my view show me this error :

"AppHelper not found", I don't know what to do.. please.. help <3

Error: Geshi.GeshiHelper could not be found.

Missing Helper

Error: Geshi.GeshiHelper could not be found.

Error: Create the class GeshiHelper below in file: /data/www/ExampleApp/app/Plugin/Geshi/View/Helper/GeshiHelper.php

How to show info windows on load

Hi,

I would like to get the Info window show onload. How can I do that.

Thank you for your help.

infowindow shows in last marker position(for many maps in single page)

when i have multiple maps in a single page and each one has the option infowindow enabled, the infowindow always take the last position of the last marker in the last map; i already fixed adding a for loop

Problem with 'markerTitle'

The first example:

<?
  // Override any of the following default options to customize your map
  $map_options = array(
    'id' => 'map_canvas',
    'width' => '800px',
    'height' => '800px',
    'style' => '',
    'zoom' => 7,
    'type' => 'HYBRID',
    'custom' => null,
    'localize' => true,
    'latitude' => 40.69847032728747,
    'longitude' => -1.9514422416687,
    'address' => '1 Infinite Loop, Cupertino',
    'marker' => true,
    'markerTitle' => 'This is my position',
    'markerIcon' => 'http://google-maps-icons.googlecode.com/files/home.png',
    'markerShadow' => 'http://google-maps-icons.googlecode.com/files/shadow.png',
    'infoWindow' => true,
    'windowText' => 'My Position',
    'draggableMarker' => false
  );
?>

<?= $this->GoogleMap->map($map_options); ?>

If you use a full URL in 'markerIcon' (starting with HTTP://), it works fine, but if I try to use something from my webroot image repository (something like $this->Url->image('image.png')), I get an error. This happens in CakePHP 3.5 because there's an unidentified variable 'IMAGES_URL' in GoogleMapHelper.php

I tried to manually set IMAGES_URL to '/img' but it wasn't working either.

My solution was to completely remove this constant and let me set the image URL manually, but you guys might find a different (and better) solution for this.

Get Location in string format

I need to get the location in string format to print it somewhere on the site. Is the any way to do it with this helper?

getDirections() Doesn't accept lat/lng arrays as to/from

If you specify a lat/lng array as the to or from value in getDirections calls it will resolve to a road called Array instead of the location of the lat lng pair. The javascript generated does reflect this.

Map Is Not Displaying

I have 2 error in Console window of the browser

1.UnCaught Reference error: noLocation is not defined.

Any help plz?

Thanks

Cakephp v3

Hi ! Thanks for this script and the version for cakephp3 but I got another issue.

This time the error that's shows up is :

Error: Unsupported operand types
File C:\wamp\www\Nico\vendor\cakephp\cakephp\src\View\Helper\HtmlHelper.php
Line: 517

From where the issue come from ?

I'll pay you a beer if you can help me <3

Set Center

I have a map with nearly 2000 markers being added, is there anyway to manually set the center of the map as it seems to be a little buggy?

Update the documentation to CakePHP 3

Javascript does not get loaded

I put the javascript call in the end and does not work, it only works if I put in the header, any tips?

Multiple Maps on a single View won't show up all Maps

Hi there,

I've ran into the following Problem:

I have a Model called Partners, which has an Adress-property. Now, what I wanted to do is some kind of a "Our Partners"-Page in which i show one or multiple Partners with their Names, Adresses, Pictures and so on...

Because I can't be sure whether there is only one Partner or many, I do this within a foreach() statement:

'partner_'.$i.'_map', 'width' => '300px', 'height' => '300px', 'style' => '', 'zoom' => 15, 'type' => 'ROADMAP', 'custom' => null, 'localize' => false, 'address' => $partner['adress'], 'marker' => true, 'markerTitle' => $partner['name'], 'infoWindow' => true, 'windowText' => $partner['name'] ); ?> GoogleMap->map($partner['Map']); ?>

Now, the problem is that only the last Map is shown, all the other Maps stay grey. I believe that the Issue lies within the way how the $options-Array is passed to the JavaScript on Google's Servers - probably a document.ready() function which is only triggered once, ignoring all the previously prepared $options-Arrays...

Any suggestions on how to solve this?

Many thanks in advance!

Map only displays in IE

The map doesn't load in Chrome or Firefox- you just get a grey square.
I have given it geo permission in all browsers.
The code served to all browsers is the same.

Under "Inspect Element -> Resources" in Chrome, it says "Uncaught ReferenceError: noLocation is not defined" under handleNoGeolocation.

It does load in Internet Explorer, strangely enough.

Source code as served to the browser is identical, and I followed the installation instructions exactly.

Map cannot be displayed!

Hi i got this error "Map cannot be displayed!" i have cakephp 2.4.1, jquery 1.10.2.
I saw the console and no errors there, i follow your instructions to how to use it:
1- GoogleMapV3Helper.php in app/View/Helper
2- In my controller public $helpers = array('GoogleMapV3');
3- In my default.ctp (Layouts) <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
4- In my view: GoogleMapV3->map(); ?>

Any idea? Thanks in advance!

No error, no display.

I want to use your plugin.
But, cannot use it.
Please teach me the reason, why cannot it.

"Process"
First, I downloaded zip.
Second, moved helper file.
Third, I wrote "public $helpers = 'GoogleMap'" to AppController.
Fourth, I wrote "Html->script('http://maps.google.com/maps/api/js?sensor=true', false); ?>" to "default.ctp" of "Layouts".
Finally, I wrote "GoogleMap->map(); ?>" to "index.ctp".

"Versions"
cakephp : 2.4
jquery : 2.1.1
bootstrap : 3

"Plugins"
http://slywalker.github.io/cakephp-plugin-boost_cake/

Best Regards,
popoko

Get current location in getDirection() function

hi.Thank you for making this for CakePHP.I'm very preciate this
I want to draw direction from current location to other one but I cant get current location in your getDirection() function.Can u help me with this?
Thank you and so sorry for my bad English

Not an issue but enhancement with code

I needed to insure that only one infoWindow was open at a time. I initialized a variable at the top of the javascript and used to to close just before opening a new one.

~ line 113 just before other variables are declared I added va

~ line 212 I modified the setMarker function to be:

function setMarker(map, id, position, title, icon, shadow, content, showInfoWindow){
var index = markers.length;
markersIds[markersIds.length] = id;
markers[index] = new google.maps.Marker({
position: position,
map: map,
icon: icon,
shadow: shadow,
title:title
});
if(content != '' && showInfoWindow){
var infowindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(markers[index], 'click', function() {
if (prev) {
prev.close();
}
prev = infowindow;
infowindow.open(map,markers[index]);
});
}
}

VisualRefresh ?

Hi,

I already use your GoogleMapHelper in some cake projects and it was really helpfull.
But the last version it is supporting the GM new look ?

Sorry for my english and thanks for your work !

I can't make multiple Maps

I am not able to create multiple maps.

Draw a circle

How can I add a circle to the map with the current maker as a center? This feature exists in Google map api V3 and here is a sample of usage:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        function initialisation(){
            var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
            var optionsCarte = {
                zoom: 15,
                center: centreCarte,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
            var optionsCercle = {
                map: maCarte,
                center: maCarte.getCenter(),
                radius: 500
            }
            var monCercle = new google.maps.Circle(optionsCercle);
        }
        google.maps.event.addDomListener(window, 'load', initialisation);
    </script>

How to create hundreds of markers?

I need to create hundreds or even thousands of markers.
I do it in this way:
GoogleMap->addMarker("map_canvas", 1, "Queens, NY"); ?>
GoogleMap->addMarker("map_canvas", 2, "Queens, NY"); ?>
etc.
but after about 10 markers I get error: Geocode was not successful for the following reason: OVER_QUERY_LIMIT

How can I resolve it?

Edit: Ok, I just must use latitude & longitude.

Showing only 3 markers!!!

In my map only 3 markers are shown. Rest are not shown.

map is not appearing

I'm trying to use this plugin in cakephp 2.3.4 along with jquery 2.0.0, and testing in firefox. But the map does not appear this, and an error is occurring in javascript.

ReferenceError: google is not defined

var geocoder = new google.maps.Geocoder(); cadastrar (linha 69)

any idea what it could be?

How to add Multiple marker on map using GoogleMap->map method or else ?

Hi,

i need the feature to implement on map related area show on map with actual area with pin and information.
i have done with single address and marker, but i want more related marker how can i supply more LatLang in option array

GoogleMap->map($map_options); ?>

Code refactor

It is not displaying map

Hi,
I have followed your instruction but it displays only gray box of width and height i mentioned...it is not displaying any map..
please help

thanks

Address Option

Entering an address doesn't seem to be geocoded into the appropriate lat and lng values. Entering the lat and lng works fine, as does the geolocation.

Here's an example of what I'm doing with an address (simple):

$map_options = array(
   'width' => '660px',
   'height' => '300px',
   'localize' => 0,
   'address' => 'toronto, ontario, canada',
   'marker' => 1
);
echo $this->GoogleMap->map($map_options); 

Error: Unsupported operand types File

I have just installed this plugin however I am getting Error: Unsupported operand types
File /home/nichol55/public_html/council4u.com/home/vendor/cakephp/cakephp/src/View/Helper/HtmlHelper.php
Line: 517

What could be the problem please?

Draggable Marker how make to populate the ItemMapLatitude field instead of logitude_1?

Hi,
how make to populate the ItemMapLatitude field instead of logitude_1?
Thanks a lot.
D.



now place search box

i am using this class and this is working fantastic.
i have written few line of codes for place search box, how can i add this to your git hub project.