Yii Framework Forum: EGMap Google Maps Extension Examples v.1.8 - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

EGMap Google Maps Extension Examples v.1.8 Examples section for EGMap v.1.8 Rate Topic: ***** 1 Votes

#1 User is offline   Antonio Ramirez 

  • Elite Member
  • Yii
  • Group: Yii Dev Team
  • Posts: 1,450
  • Joined: 04-October 10

Posted 03 February 2011 - 08:42 AM

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.8), 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();

¿How long would it take for you to understand that you own nothing in this world?

www.ramirezcobos.com
www.2amigos.us
www.github.com/tonydspaniard
www.github.com/2amigos


Posted Image
2

#2 User is offline   canreo 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 14
  • Joined: 21-July 09

Posted 27 July 2011 - 06:46 PM

Fantastic extension! Have you made any additional progress?

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

#3 User is offline   Antonio Ramirez 

  • Elite Member
  • Yii
  • Group: Yii Dev Team
  • Posts: 1,450
  • Joined: 04-October 10

Posted 14 August 2011 - 06:06 AM

View Postcanreo, 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
¿How long would it take for you to understand that you own nothing in this world?

www.ramirezcobos.com
www.2amigos.us
www.github.com/tonydspaniard
www.github.com/2amigos


Posted Image
0

#4 User is offline   Leffe 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 10
  • Joined: 22-April 11

Posted 14 August 2011 - 05:01 PM

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.
0

#5 User is offline   Antonio Ramirez 

  • Elite Member
  • Yii
  • Group: Yii Dev Team
  • Posts: 1,450
  • Joined: 04-October 10

Posted 15 August 2011 - 06:46 PM

View PostLeffe, 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...
¿How long would it take for you to understand that you own nothing in this world?

www.ramirezcobos.com
www.2amigos.us
www.github.com/tonydspaniard
www.github.com/2amigos


Posted Image
0

#6 User is offline   LiuXuan 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 24-April 11
  • Location:Beijing

Posted 08 November 2011 - 03:21 AM

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
0

#7 User is offline   MasterCz 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 18-November 10

Posted 17 January 2012 - 06:11 AM

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

#8 User is offline   noidongcoida_84 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 12-May 12

Posted 12 May 2012 - 11:26 PM

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
Attached File  hospital-index-screenshot.jpg (69.41K)
Number of downloads: 89
0

#9 User is offline   waterloomatt 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 545
  • Joined: 09-April 10

Posted 03 December 2012 - 10:38 PM

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

Matt

View Postnoidongcoida_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
Attachment hospital-index-screenshot.jpg

0

#10 User is offline   faizalmansor 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 3
  • Joined: 15-December 08

Posted 22 December 2012 - 11:36 AM

View Postwaterloomatt, 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.
0

#11 User is offline   michelinho80 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 21
  • Joined: 07-November 12
  • Location:Tenerife, Islas Canarias, España

Posted 15 April 2013 - 02:16 PM

Hi all,

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

Posted Image

Any ideas?
0

#12 User is offline   michelinho80 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 21
  • Joined: 07-November 12
  • Location:Tenerife, Islas Canarias, España

Posted 15 April 2013 - 04:44 PM

Solved!

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

View Postmichelinho80, 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:

Posted Image

Any ideas?

0

#13 User is offline   newscloud 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 39
  • Joined: 02-April 13
  • Location:Seattle, Washington USA

Posted 03 June 2013 - 02:23 PM

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?
---------------------------
Jeff Reifman
jeff@lookahead.io
http://jeffreifman.com
http://lookahead.io
0

#14 User is offline   Sebastian K. 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 65
  • Joined: 29-May 11

Posted 15 August 2013 - 11:03 PM

Hi,

I am using egmap for long time now for my projects.
Recently I bumped into this problem: https://github.com/2.../egmap/issues/2

Can somebody reproduce the problem with Firefox 23?

Best Regards
Sebastian
0

#15 User is offline   formoda 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 26-March 10

Posted 08 January 2014 - 09:33 AM

Hi,

Thanks for the great extension! I'm having a minor problem setting the width of my info windows.

$infoBox = new EGMapInfoBox('<div class="map-icon">' . $infoBoxContent . '</div>');
$infoBox->maxWidth = 100;
$image = new EGMapMarkerImage('/images/mapitem/' . $icon->icon_id . '.png');
$image->setSize(21, 18);
$marker = new EGMapMarker($icon->map_lat, $icon->map_lng, array('title' => $icon->node->title, 'icon' => $image, 'visible' => false), 'mapicon' . $icon->id);
$marker->addHtmlInfoWindow($infoBox);
$gMap->addMarker($marker);


This has no effect and the width is always determined by the content. Any ideas?

Many thanks
0

#16 User is offline   carpin 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 62
  • Joined: 05-December 13

Posted 10 July 2014 - 02:57 PM

buenas tardes!!! estoy queriendo exportar el mapa a pdf alguien sabe como puedo hacerlo? desde ya muchas gracias
0

#17 User is offline   funthere 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 6
  • Joined: 16-April 13

Posted 22 July 2014 - 07:41 PM

View PostAntonio Ramirez, on 14 August 2011 - 06:06 AM, said:

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


I want to make the infoWindow appear when hover/mouseover to multi-polygon(different infoWindow in different polygon) and data in infoWindow retrieve from database. I've try to implement by this code in view:
$info = new EGMapEvent('mouseover', "function (event) { $.ajax({
                                            'type':'GET',
                                             'url':'".$this->createUrl('tabelpoly/view',array('id'=>$dataProvider->id))."',
                                            'data':({'lat': event.latLng.lat(), 'lng': event.latLng.lng()}),
                                            'cache':false,
                                        });}", false, EGMapEvent::TYPE_EVENT_DEFAULT);

                        
                        
                         
                        $polygon->addEvent($info);
                        $gMap->addPolygon($polygon);


And this code in TabelpolyController:
public function actionView($id)
        {
                $this->render('index',array(
                        'dataProvider'=>$this->loadModel($id),
                ));
        }


Until this far, nothing's appear when hover to the polygon. Anyone can help me please? Or is there another way to do this? Thank you
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users