[Antonio Ramirez]

I am about to update the information about EGMap for the newest version. Backwards compatibility has been broken, information and examples of previous version 1.8 will be held in this post, though it wont be supported anymore. This post will be eventually deleted.

Introduction
Inspired on the symphony plugin [Symphony plugin developed by Fabrice Bernhard](http://www.symfony-p...fEasyGMapPlugin "sfEasyGMailPlugin") EGMaps provides a very easy way to implement Google Maps on your Yii application.

There have been major changes in version v.1.8. With the inclusion of utility libraries (plugins) the extension jumps onto a new level. Still, even though the extension is its early stage, I believe you can all take advantage of the easiness of its use to seamlessly include Google maps on your Yii site.

##ChangeLog
24-01-2011 version 1.8
- Added MapType Controls Styles and Positioning
- Fixed minor bugs throughout all the library classes
- Included EGMapPoint and EGMapSize classes to the library
- Code cleaning, improved code algorithms
- Included EGMapKeyDragZoom class to allow 'shift-click-and-drag' option
- Included EGMapControlPosition Class, now we can easily set controls on different positions on the map
- Included EGMapMarkerWithLabel class to allow markers with labels
- Included EGMapMarkerClusterer class to support marker clusterer feature
- Fixed common sharing info window option. Now users can choose whether to share a common info window variable or not
- Improved options encode. Included modified version of CJavaScript::encode to properly render Google Maps options.

10-01-2011 version 1.7
- Fixed EGMapMarkerImage rendering bug
- Added Support for Global Info Window Reference. Now, only one info window is open at all times. (Thanks bitmatix)

10-01-2011 version 1.6
- Removed EGMapIcon class (deprecated for Google Maps v3)
- Modified
- Added setIcon, getIcon, setShadow, getShadow functions to EGMapMarker class
- Removed deprecated functions and references on EGMap class

06-01-2011 version 1.5
- Removed global_variables dependency
- Fixed minor javascript bug for global variables
- Fixed minor naming rendering bugs (jsName)
- Included possibility to change jsName

24-12-2010 version 1.4
- Fixed marker reference when rendering multiple maps
- Fixed directions reference when rendering multiple maps
- Fixed global variables registration bug
- Fixed minor rendered javascript bugs
- Fixed rendering container bug THANKS MDOMBA (Yii support really rocks!)
- Added appendTo function to add maps to a container ID in the page
- If no appendTo JQuery ID is set, Maps will be appended to document
- Removed initialization function name dependency. Now the function is related to Map Ids.

23-12-2010
- Fixed bug on getMarkersFittingZoom function
- Fixed bug on getMarkersCenterCoord function


##Requirements
Google API Key if you are going to use static maps. The library comes with a default key for 'localhost'. Check at its source code to find out about its setAPIKey() method.

Developed with latest stable version of Yii (1.1.6)


##Usage
Unzip its contents and place the *gmaps* folder into your protected/extensions folder.

#Examples
This examples where written all in a *view file*.

Example #1
Simple map with an icon

Yii::import('ext.gmaps.*');
$gMap = new EGMap();
$gMap->setCenter(51.245475,6.821373);
$gMap->addMarker(new EGMapMarker(51.245475,6.821373));
$gMap->addMarker(new EGMapMarker(46.262248,6.115969));
$gMap->setZoom(4);
$gMap->renderMap();

Example #2
Simple Map with an infoWindow

 Yii::import('ext.gmaps.*');

 $gMap = new EGMap();
 $gMap->setZoom(13);
 $gMap->setCenter(39.721089311812094, 2.91165944519042);

 // Create GMapInfoWindow
 $info_window = new EGMapInfoWindow('<div>I was living here as a kid!</div>');

 // Create marker
 $marker = new EGMapMarker(39.721089311812094, 2.91165944519042, array('title' => '"My Town"'));
 $marker->addHtmlInfoWindow($info_window);
 $gMap->addMarker($marker);
 $gMap->renderMap();

Example #3
Two maps on the same page (you can put as many as you wish)
**NOTE**
This is an updated version example for version gmap v.1.2. Previous, downloads please update versions!

<?php
 Yii::import('ext.gmaps.*');
 $gMap = new EGMap();
 // No need to set it up anymore, EGMap handles it automatically
 // Do this if you want more IDs control
 // $gMap->setContainerId('map1');
 $gMap->setZoom(13);
 $gMap->setCenter(39.721089311812094, 2.91165944519042);

 // Create GMapInfoWindow
 $info_window = new EGMapInfoWindow('<div>I was living here as a kid!</div>');

 // Create marker
 $marker = new EGMapMarker(39.721089311812094, 2.91165944519042, array('title' => '"My Town"'));
 $marker->addHtmlInfoWindow($info_window);
 $gMap->addMarker($marker);

 // we can now render to any containers in the document, we control where
 // we want it to be rendered now without coding the HTML elements for the
 // Google map
 // If we do not specify the container, the map will be rendered to the BODY 
 // tag of the document
 $gMap->appendMapTo('#map1_container');
 $gMap->renderMap();

 $gMap = new EGMap();
 // Not needed but you can do it for more control
 // over IDs
 // $gMap->setContainerId('map2');
 // changing proportions
 $gMap->setWidth(512);
 $gMap->setHeight(400);
 $gMap->setZoom(16);

 $sample_address = 'Calle de la Campana, 07800 Inca, Spain';
    
 // Create geocoded address
 $geocoded_address = new EGMapGeocodedAddress($sample_address);
 $geocoded_address->geocode($gMap->getGMapClient());
    
 // Center the map on geocoded address
 $gMap->setCenter($geocoded_address->getLat(), $geocoded_address->getLng());
    
 // Add marker on geocoded address
 $gMap->addMarker(
      new EGMapMarker($geocoded_address->getLat(), $geocoded_address->getLng())
 );
 
 $gMap->appendMapTo('#map2_container');
 $gMap->renderMap();
?>
<div id="map2_container" style="width:512px; height:400px;float:left;padding:5px"></div>

Example #4
Include a custom icon marker, a labelled Marker (since version 1., and position map type controls with style drop-down.

Style class required for the example. Include it in your test view.

<style type="text/css">
   .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;     
     border: 2px solid black;
     white-space: nowrap;
  }
</style>

Now the PHP code

Yii::import('ext.gmaps.*');

$gMap = new EGMap();
$gMap->setZoom(10);

// let's change position and style of the map type controls
$mapTypeControlOptions = array(
	'position'=> EGMapControlPosition::LEFT_BOTTOM,
	'style'=>EGMap::MAPTYPECONTROL_STYLE_DROPDOWN_MENU
);
$gMap->setOption('mapTypeControlOptions',$mapTypeControlOptions);

// set center
$gMap->setCenter(39.721089311812094, 2.91165944519042);

// Create GMapInfoWindows
$info_window_a = new EGMapInfoWindow('<div>I am a marker with custom image!</div>');
$info_window_b = new EGMapInfoWindow('Hey! I am a marker with label. Drag me!');
	
// Create custom icon	
$icon = new EGMapMarkerImage("http://google-mapsicons.googlecode.com/files/gazstation.png");
$icon->setSize(32, 37);
$icon->setAnchor(16, 16.5);
$icon->setOrigin(0, 0);
	
// Create marker
$marker = new EGMapMarker(39.721089311812094, 2.91165944519042, array('title' => 'Marker With Custom Image','icon'=>$icon));
// Set its infoWindow (INFO_WINDOW is shared -please check 
// addHtmlInfoWindow params for more info)
$marker->addHtmlInfoWindow($info_window_a);
$gMap->addMarker($marker);
	
// Now Create marker with label
$marker = new EGMapMarkerWithLabel(39.821089311812094, 2.90165944519042, array('title' => 'Marker With Label'));

// Options for the style of the label
// Please see plugin reference for more details
// (included link on source code)
$options = array(
 'backgroundColor'=>'yellow',
 'opacity'=>'0.75',
 //'width'=>'100px'
);
// Setting marker label options
$marker_options = array(
  'labelContent'=>'$9393K',
  'labelStyle'=>$options,
  'draggable'=>true,
  'labelClass'=>'labels',
  'labelAnchor'=>new EGMapPoint(22,0),
  'raiseOnDrag'=>true
);

$marker->setOptions($marker_options);

// We can also set its options this way
//$marker->setOption('labelContent', '$425K');
// Once set, options are CJavaScript::encoded internally
//$marker->setOption('labelStyle',$options);
//$marker->setOption('draggable',true);
//$marker->setOption('labelClass','labels');
//$marker->setOption('raiseOnDrag',true);
//$marker->setLabelAnchor(new EGMapPoint(22,0));

// attach second info window	
$marker->addHtmlInfoWindow($info_window_B);
	
$gMap->addMarker($marker);
$gMap->renderMap();

[canreo]

Fantastic extension! Have you made any additional progress?

Do you have any examples for 1: Circles and 2: Polygons?

[Antonio Ramirez]

canreo, on 27 July 2011 - 06:46 PM, said:

Fantastic extension! Have you made any additional progress?

Do you have any examples for 1: Circles and 2: Polygons?

Yes there are, check http://code.google.com/p/egmap/ , no much time to update anything

[Leffe]

Have you considered the possibility of choosing different map layers than those offered by Google? For example, the Open Street Map layers. It might be that in order to do that, you will need to support both the Google Maps backend as well as the OpenLayers backend. Though, I fear adding support for another backend to this extension would probably require quite a decent work.

[Antonio Ramirez]

Leffe, on 14 August 2011 - 05:01 PM, said:

Have you considered the possibility of choosing different map layers than those offered by Google? For example, the Open Street Map layers. It might be that in order to do that, you will need to support both the Google Maps backend as well as the OpenLayers backend. Though, I fear adding support for another backend to this extension would probably require quite a decent work.

If I was to do something different, I would probably go for http://www.mapstraction.com/

Nevertheless, no time at all at the moment...

[LiuXuan]

I am a newbie in yii,I want to use this EGmaps extension in my application, but is there any tutorial on how to config the extension?

Thanks for your help. the version I want to try is EGmaps v2.0

[MasterCz]

Hallo.
Thanks for this extentions.
Tell me please, how make "reposition" marker with this extention.
Sorry for my english.

[noidongcoida_84]

Hi Antonio,
Firstly, thanks very much for this extention.
And i am using this for one of my project with need to display all the addresses in one map.
The problem that i am having is the info windows which cannot display properly i the close button (x) is disappear.
Could you please take a look at my attach image and please tell he how to solve this problem?
Thank you very much
 hospital-index-screenshot.jpg (69.41K)
Number of downloads: 47

[waterloomatt]

I'm having the same problem - did you find a solution?

Matt

noidongcoida_84, on 12 May 2012 - 11:26 PM, said:

Hi Antonio,
Firstly, thanks very much for this extention.
And i am using this for one of my project with need to display all the addresses in one map.
The problem that i am having is the info windows which cannot display properly i the close button (x) is disappear.
Could you please take a look at my attach image and please tell he how to solve this problem?
Thank you very much
hospital-index-screenshot.jpg

[faizalmansor]

waterloomatt, on 03 December 2012 - 10:38 PM, said:

I'm having the same problem - did you find a solution?

Matt

Hi Matt,

Got the same problem as you. Found the fix, just add the following style to the page that render the map:

<style>
#EGMapContainer0 img{max-width:none}
</style>

EGMapContainer0 is the default id, change this to whatever you map canvas id is.

[michelinho80]

Hi all,

I'm using this extension in my website, but left-side controls are shown this way:



Any ideas?

[michelinho80]

Solved!

It was bootstrap.css (img {max-width:100%;}) playing with my patience!

michelinho80, on 15 April 2013 - 02:16 PM, said:

Hi all,

I'm using this extension in my website, but left-side controls are shown this way:



Any ideas?

[newscloud]

I'm also having problems with the reposition graphic marker appearing, see:
screenshot

I've tried adding this ... but it does not fix it.
// egMap icon fix
#EGMapContainer0 img{max-width:none}

Any suggestion?