EGMap Google Maps Extension Examples v.1.8

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-project.org/plugins/sfEasyGMapPlugin "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();