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)
Next version of this extension will include:
Elevation Paths (DONE)
Polylines (DONE)
Rectangles (DONE)
Circles (DONE)
Polygons (DONE)
Animations Support (DONE)
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.
Total 20 comments
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)
Hi,
this may sound a little bit strange, but what I need for my project, is a static image (without) any zoom, ... etc. functions (but pls. with markers, polygons,..inside).
Is their a method I can use to just grep this image and send it back to the browser as MIME image/jpeg???
This would be great!
Cheers Philipp
Solution on: http://www.yiiframework.com/forum/index.php?/topic/14445-egmap-20-google-maps-extension/page__view__findpost__p__136891 ( as you already know ;) )
Hi I am using this gmap and make it appear on a Jui Dialog but the problem is the map is not displaying completely.. only a part of it.. any idea what's the problem?
thanks
I posted the bug earlier.
I solved it actually it is not extension. Infact this is the most wonderful extension with great document and working samples that I have come across.
Issue was in css/style.css I by mistake wrote a code that eventually effected this extension
1.It does not help if i donot use that marker or other i tried with
2.Using
also did not helped
**Note: it was working few days ago perfectly. No issues there.
If I use some of your sample codes given above same happens with them**
may be google has changed something?
For what I see, is that for some reason the layer behind the icon doesn't download/show. Please, try the following:
Hi there I loved this awesome plugin and used in my each website.
Now Strange thing have appeared in my existing web implementation. That all of sudden there a box has started to appear where marker is placed. More over I found out if you set draggable => true this box vanishes.
I am attaching the code and Image .Hope it Helps.If it gets resolved please tell me :)
NO THEY ARE NOT SOME GOOGLE RESTRICTED AREAS WHERE EVER MARKER IS THEY APPEAR BEHIND ICON. ICON IS SMALL AS SEEN IN IMAGE
Hi Mastercz,
What do you meant about REPOSITION marker. Could you please explain that at the 'forum'?
Hi, Antonio Tell me please - how make 'REPOSITION' marker, with your extention. Advance thanks.
Hi, I apologize for my impatient behavior. I just spent a long time trying to figure out why this extension was not running. I trusted that the documentation was up to date, but sometimes little details are missed.
I greatly appreciate everything that authors such as yourself have put into the Yii project and I will one day in turn, give back as well. I thank you for your help and understanding! Cheers!
@qinsanep
First of all as you alone acknowledge that you are a noob, didn't maybe you get the idea that it's not working because of wrong usage or something similar.
But even if that was an error... don't you think it would be better to just notify the author so he can fix it.
Hi qinsanep,
Thank you very much for pointing that out. I shouldn't assume that everybody knows what import means and inform everybody how to correctly set the folder.
Nevertheless, I would recommend you to use another language to express your self on this site. People may find it disrespectful, and a lot of them, do give away lots of their time to help others improve their Yii applications.
Thanks again
There was a bug yes: "imagesPath", didn't belong to EGMapClusterer options. If you wish to change clusterer marker images, you have to set its style attribute as explained on the following link:
http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/1.0/docs/reference.html#MarkerClustererOptions
PS: The GitHub has been updated with the bug fix, thanks bitshine.
Everybody: i have an user address and i want to display a map in the view.php with the map centered on user's house (having his address in my DB). How can i do it?
Is there a way to disable mouse wheel?
Thanks
When I want to change the makerClusterer image, the js lost qoutation, function toJs() may change to
$return = 'var '.$this->getJsName().'= new MarkerClusterer('.$map_js_name.','.EGMap::encode($markers).',"'.EGMap::encode($this->options).'");';But when set the imagesPath, the marker still not changed.
$gMapMarkerClusterer=new EGMapMarkerClusterer( array('imagesPath'=>'http://google-maps-icons.googlecode.com/files/cityhall-admin.png'));Leave a comment
Please login to leave your comment.