Nearly totally re-written, this extension is the new version of EGMap. I decided to include it as a new version as this one breaks backwards compatibility. I did that in order to implement a different approach, more like the Yii style.
With the new code it was also possible to do lot of code cleansing, making the classes more compact.
Now, magic getters and setters allows the use of options and functions pre-named as set or get, like properties, more or less what is happening with CComponent.
This version have (including all of the previous EGMap library):
LatLonControl
DragKeyZoom Control
MarkerWithLabel Control
Clusterer Marker Support
KML Support (it also includes the library EGMapKMLFeed, which was created to provide an easy way to create KML documents)
TODO LIST
AJAX marker rendering features
Note: Information about previous versions of this extension are on this Forum Post

Unpack the contents of the zip file and place it on your protected/extensions folder. This package names EGMap library folder EGMAP, so make sure you read http://www.yiiframework.com/doc/api/1.1/YiiBase#import-detail, to understand clearly how to setup correctly the folder's extension.
The following example shows you how you can use markers and markers with labels. It also shows how to enable a default marker clusterer
// // ext is your protected.extensions folder // gmaps means the subfolder name under your protected.extensions folder // Yii::import('ext.gmap.*'); $gMap = new EGMap(); $gMap->zoom = 10; $mapTypeControlOptions = array( 'position'=> EGMapControlPosition::LEFT_BOTTOM, 'style'=>EGMap::MAPTYPECONTROL_STYLE_DROPDOWN_MENU ); $gMap->mapTypeControlOptions= $mapTypeControlOptions; $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!'); $icon = new EGMapMarkerImage("http://google-maps-icons.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)); $marker->addHtmlInfoWindow($info_window_a); $gMap->addMarker($marker); // Create marker with label $marker = new EGMapMarkerWithLabel(39.821089311812094, 2.90165944519042, array('title' => 'Marker With Label')); $label_options = array( 'backgroundColor'=>'yellow', 'opacity'=>'0.75', 'width'=>'100px', 'color'=>'blue' ); /* // Two ways of setting options // ONE WAY: $marker_options = array( 'labelContent'=>'$9393K', 'labelStyle'=>$label_options, 'draggable'=>true, // check the style ID // afterwards!!! 'labelClass'=>'labels', 'labelAnchor'=>new EGMapPoint(22,2), 'raiseOnDrag'=>true ); $marker->setOptions($marker_options); */ // SECOND WAY: $marker->labelContent= '$425K'; $marker->labelStyle=$label_options; $marker->draggable=true; $marker->labelClass='labels'; $marker->raiseOnDrag= true; $marker->setLabelAnchor(new EGMapPoint(22,0)); $marker->addHtmlInfoWindow($info_window_b); $gMap->addMarker($marker); // enabling marker clusterer just for fun // to view it zoom-out the map $gMap->enableMarkerClusterer(new EGMapMarkerClusterer()); $gMap->renderMap(); <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>
As KML is a service that is readed from Google services, you cannot use localhost KML files, to do so, you need to specify that is localhost kml file on enableKMLService function and the geoxml3.js plugin should be automatically registered.
Yii::import('ext.gmap.*'); $gMap = new EGMap(); // using the new magic setters // check available options per class // objects with setMethod,getMethod and // options array can be set now this way $gMap->zoom = 10; $mapTypeControlOptions = array( // yes we can position the controls now // where we want 'position'=> EGMapControlPosition::LEFT_BOTTOM, 'style'=>EGMap::MAPTYPECONTROL_STYLE_DROPDOWN_MENU ); $gMap->mapTypeControlOptions= $mapTypeControlOptions; // enabling KML Service. Second parameter of this // function tells whether is localhost or not. GeoXML3.js // is needed to read localhost KML files. $gMap->enableKMLService('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'); $gMap->renderMap();
How to work with directions and waypoints
Yii::import('ext.gmap.*'); $gMap = new EGMap(); $gMap->setWidth(512); // it can also be called $gMap->height = 400; $gMap->setHeight(400); $gMap->zoom = 8; // set center to inca $gMap->setCenter(39.719588117933185, 2.9087440013885635); // my house when i was a kid $home = new EGMapCoord(39.720991014764536, 2.911801719665541); // my ex-school $school = new EGMapCoord(39.719456079114956, 2.8979293346405166); // some stops on the way $santo_domingo = new EGMapCoord(39.72118906848983, 2.907628202438368); $plaza_toros = new EGMapCoord(39.71945607911511, 2.9049245357513565); $paso_del_tren = new EGMapCoord( 39.718762871171776, 2.903637075424208 ); // Waypoint samples $waypoints = array( new EGMapDirectionWayPoint($santo_domingo), new EGMapDirectionWayPoint($plaza_toros, false), new EGMapDirectionWayPoint($paso_del_tren, false) ); // Initialize GMapDirection $direction = new EGMapDirection($home, $school, 'direction_sample', array('waypoints' => $waypoints)); $direction->optimizeWaypoints = true; $direction->provideRouteAlternatives = true; $renderer = new EGMapDirectionRenderer(); $renderer->draggable = true; $renderer->panel = "direction_pane"; $renderer->setPolylineOptions(array('strokeColor'=>'#FFAA00')); $direction->setRenderer($renderer); $gMap->addDirection($direction); $gMap->renderMap(); <div id="direction_pane"></div>
How to make use of the KeyDragZoom plugin. When you use the following example, check the small magnifying glass under the zoom control or press the Shift Key to enable the Key Drag Zoom.
Yii::import('ext.gmap.*'); $gMap = new EGMap(); $gMap->zoom = 8; // set center to inca $gMap->setCenter(39.719588117933185, 2.9087440013885635); $gMap->width = 400; $gMap->height = 400; // Enable Key Drag Zoom $zoom_options = array( 'visualEnabled'=>true, 'boxStyle'=>array( 'border'=>'4px dashed black', // strings with double quoted inside! 'backgroundColor'=>'transparent', 'opacity'=>1.0 ), 'veilStyle'=>array( 'backgroundColor'=>'red', 'opacity'=>0.35, 'cursor'=>'crosshair' )); $drag_Zoom = new EGMapKeyDragZoom($zoom_options); $gMap->enableKeyDragZoom($drag_Zoom); $gMap->renderMap();
Where $map is model of database table to save coordinates of a marker point. Example provided by Johnatan
ii::import('ext.gmap.*'); $gMap = new EGMap(); $gMap->setWidth(880); $gMap->setHeight(550); $gMap->zoom = 6; $mapTypeControlOptions = array( 'position' => EGMapControlPosition::RIGHT_TOP, 'style' => EGMap::MAPTYPECONTROL_STYLE_HORIZONTAL_BAR ); $gMap->mapTypeId = EGMap::TYPE_ROADMAP; $gMap->mapTypeControlOptions = $mapTypeControlOptions; // Preparing InfoWindow with information about our marker. $info_window_a = new EGMapInfoWindow("<div class='gmaps-label' style='color: #000;'>Hi! I'm your marker!</div>"); // Setting up an icon for marker. $icon = new EGMapMarkerImage("http://google-maps-icons.googlecode.com/files/car.png"); $icon->setSize(32, 37); $icon->setAnchor(16, 16.5); $icon->setOrigin(0, 0); // Saving coordinates after user dragged our marker. $dragevent = new EGMapEvent('dragend', "function (event) { $.ajax({ 'type':'POST', 'url':'".$this->createUrl('catalog/savecoords').'/'.$items->id."', 'data':({'lat': event.latLng.lat(), 'lng': event.latLng.lng()}), 'cache':false, });}", false, EGMapEvent::TYPE_EVENT_DEFAULT); // If we have already created marker - show it if ($map) { $marker = new EGMapMarker($map->lat, $map->lng, array('title' => Yii::t('catalog', $items->type->name), 'icon'=>$icon, 'draggable'=>true), 'marker', array('dragevent'=>$dragevent)); $marker->addHtmlInfoWindow($info_window_a); $gMap->addMarker($marker); $gMap->setCenter($map->lat, $map->lng); $gMap->zoom = 16; // If we don't have marker in database - make sure user can create one } else { $gMap->setCenter(38.348850, -0.477551); // Setting up new event for user click on map, so marker will be created on place and respectful event added. $gMap->addEvent(new EGMapEvent('click', 'function (event) {var marker = new google.maps.Marker({position: event.latLng, map: '.$gMap->getJsName(). ', draggable: true, icon: '.$icon->toJs().'}); '.$gMap->getJsName(). '.setCenter(event.latLng); var dragevent = '.$dragevent->toJs('marker'). '; $.ajax({'. '"type":"POST",'. '"url":"'.$this->createUrl('catalog/savecoords')."/".$items->id.'",'. '"data":({"lat": event.latLng.lat(), "lng": event.latLng.lng()}),'. '"cache":false,'. '}); }', false, EGMapEvent::TYPE_EVENT_DEFAULT_ONCE)); } $gMap->renderMap(array(), Yii::app()->language);
InfoBox is a cool plugin that allows you to modify the info windows of your map.
Yii::import('site.common.components.egmap.*'); $gMap = new EGMap(); $gMap->setJsName('test_map'); $gMap->width = '100%'; $gMap->height = 300; $gMap->zoom = 8; $gMap->setCenter(39.737827146489174, 3.2830574338912477); $info_box = new EGMapInfoBox('<div style="color:#fff;border: 1px solid black; margin-top: 8px; background: #000; padding: 5px;">I am a marker with info box!</div>'); // set the properties $info_box->pixelOffset = new EGMapSize('0','-140'); $info_box->maxWidth = 0; $info_box->boxStyle = array( 'width'=>'"280px"', 'height'=>'"120px"', 'background'=>'"url(http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/tipbox.gif) no-repeat"' ); $info_box->closeBoxMargin = '"10px 2px 2px 2px"'; $info_box->infoBoxClearance = new EGMapSize(1,1); $info_box->enableEventPropagation ='"floatPane"'; // with the second info box, we don't need to // set its properties as we are sharing a global // info_box $info_box2 = new EGMapInfoBox('<div style="color:#000;border: 1px solid #c0c0c0; margin-top: 8px; background: #c0c0c0; padding: 5px;">I am a marker with info box 2!</div>'); // Create marker $marker = new EGMapMarker(39.721089311812094, 2.91165944519042, array('title' => 'Marker With Info Box')); // add two $marker2 = new EGMapMarker(39.721089311812094, 2.81165944519042, array('title' => 'Marker With Info Box 2')); $marker->addHtmlInfoBox($info_box); $marker2->addHtmlInfoBox($info_box2); $gMap->addMarker($marker); $gMap->addMarker($marker2); $gMap->renderMap();
Yii::import('site.common.components.egmap.*'); $gMap = new EGMap(); $gMap->setJsName('test_map'); $gMap->width = '100%'; $gMap->height = 300; $gMap->zoom = 4; $gMap->setCenter(25.774252, -80.190262); $bounds = new EGMapBounds(new EGMapCoord(25.774252, -80.190262),new EGMapCoord(32.321384, -64.75737) ); $rec = new EGMapRectangle($bounds); $rec->addHtmlInfoWindow(new EGMapInfoWindow('Hey! I am a rectangle!')); $gMap->addRectangle($rec); $gMap->renderMap();
Yii::import('site.common.components.egmap.*'); $gMap = new EGMap(); $gMap->setJsName('test_map'); $gMap->width = '100%'; $gMap->height = 300; $gMap->zoom = 4; $gMap->setCenter(34.04924594193164, -118.24104309082031); $circle = new EGMapCircle(new EGMapCoord(34.04924594193164, -118.24104309082031)); $circle->radius = 300000; $circle->addHtmlInfoWindow(new EGMapInfoWindow('Hey! I am a circle!')); $gMap->addCircle($circle); $gMap->renderMap();
Yii::import('site.common.components.egmap.*'); $gMap = new EGMap(); $gMap->setJsName('test_map'); $gMap->width = '100%'; $gMap->height = 300; $gMap->zoom = 4; $gMap->setCenter(25.774252, -80.190262); $coords = array( new EGMapCoord(25.774252, -80.190262), new EGMapCoord(18.466465, -66.118292), new EGMapCoord(32.321384, -64.75737), new EGMapCoord(25.774252, -80.190262) ); $polygon = new EGMapPolygon($coords); $polygon->addHtmlInfoWindow(new EGMapInfoWindow('Hey! I am a polygon!')); $gMap->addPolygon($polygon); $gMap->renderMap();
Yii::import('site.common.components.egmap.*'); $gMap = new EGMap(); $gMap->setWidth(500); $gMap->setHeight(400); $gMap->zoom = 5; $sample_address = 'Czech Republic, Prague, Olivova'; // 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->renderMap();
$e = new EGMapElevationInfo( array('25.774252, -80.190262', '18.466465, -66.118292', new EGMapCoord(32.321384, -64.75737), /* we can also use EGMapCoord */ new EGMapCoord(25.774252, -80.190262))); $e->elevationRequestJson(new EGMapClient()); $loc = $e->getLocations(); foreach($loc as $l) { echo $l->lat.'<br/>'; echo $l->lng.'<br/>'; echo $l->resolution.'<br/>'; echo $l->elevation.'<br/>'; echo '--------------<br/>'; }
Be up-to-date with this extension on my blog. I will write demos and explain its total functionality there in order not to make this article too long.
I love what I do, if you appreciate my work I accept donations at Gittip
web development has never been so fun
www.2amigos.us
Total 20 comments
in EGmap.php
lines 1086
and 1100
you can take out the .'px' completely or change it to %.
note if you take it out you will need to type in px or % in your view
i.e.
It was a problem with bootstrap.css.
Another question: Reverse geocode is not working, or?
Hello, I've tried "A More Advanced Example" in my website, and I see the left-side controls this way:
Any ideas?
Hi Antonio
for EGMap.v.2.9.zip version all examples needs Yii::import('ext.egmap.') instead of Yii::import('ext.gmap.')
Also I gave you vote, excellent work for this extension :)
in EGMapInfoBox.php
need replace with:
And for custom closebox ico should use:
Hi i want to use the get direction api in this extension so how can i achieve this.
Hey Guys,
i am trying to add the event listener "closeclick" to the infowindow, but it is not working.
Does anybody know what i am doing wrong?
Best regards!
Please, use the forum to get support... I do my best to answer asap
Hi antonio, thanks for this ext, I'm using "Yii 1.1.13" and for import extension I write:
instead of
then after $gMap->renderMap(); function firefox return me this error: (note: modal window & renderPartial)
thanks
I have the $gMap variable.How can i set the current position with the javascript method of geolocation watchPosition???
I am trying to implements the google map on the clist view but its not working.
Pleas suggest me any good example how to implement it.
I would know how can I use your extension with extention minScript . I get
in my FireBug. help please
Hi I am using this in realestate project. the marker as created dynamically, I actually want to set the center for the all markers, i,e the center i must create would be the center of all marker how can i achieve this or not possible, further more can i get data in any object or in array of near by places with this extension example if i had places like a,b,c,d,e,f,g so if i want to get place near by c than can this extension could have some function or method to return b and d places,
U had make great extension i appreciate for you work, i think you more about near place api of google map.
Thank waiting for your response.
Great module!! I need to adjust the zoom so that markers are plotted by city, rather than physical address. Both fields are saved in the model and database. How do I modify this?
Not sure if this is happening to any one else, but my maps stopped working, they just point into the middle of the ocean, it used to work just right before, and works on my local host. Any idea whats wrong?
Found that it keeps setting
to 0,0 no matter what.
Why does it do this on my online server yet on localhost it works just right?
I want to point out multiple marker that comes from database. Like this the exact I want http://www.realestate.com.au/buy/in-ayers+rock%3b+barunga%3b+atitjere/map-1 but I can't get it.
I any one done this before with multiple marker or not.
Help me out.
Hi I am very happy with this extension. I wonder if I am missing or this extension does not have feature to register place other than specifying AJAX calls.
I mean is if you have form and you add a small map and allow user to select place and fill other form. Once everything is done he clicks submit and then long and lat values go to database. If anyone has done this please help me. Thanks
I will add support to all objects as soon as i have bit of time.
Hi,
I tried to use the staticMapUrl -> but it "only" brings back the map without any e.g. polygon...
I checked out google api's and they have a static map API returning the map with included objects - do egmap support it already or will it? I love your extension and I ask you for all the stuff, as I need it...;)
Cheers Philipp
http://maps.google.com/staticmap?maptype=mobile&zoom=11¢er=48.2002%2C16.3506&size=512x512&hl=en&markers=
Additional API from Google:
Google Maps Static API
Check at the code... you have the getStaticMapUrl for that purpose (line 1114 EGMap class)
Leave a comment
Please login to leave your comment.