EGMap 2.0 Google Maps Extension

Yii 1.1 Extensions
161

Hi Gooroo!

Sorry for the late response… too much work lately :)

Yep, you can do that but for the mobile phone you will have to work with phoneGap (for native applications on iOS) or other javascript libraries that can talk to the mobile’s GPS. Then on location change move the marker accordingly. That is perfectly feasible.

Nevertheless, there are a couple of things you need to solve: site or native application? if you do SITE, then user will have to grant you access to its GPS location :http://stackoverflow.com/questions/221592/geolocation-api-on-the-iphone

Hope this helps you

162

help me please…

i am interesting with egmap extension. but i’m newbie and don’t know how to install and use this extension for my web application.

thanks for help me. i’m waiting" ;)

163

Have you checked its extensive wiki and examples of use?

http://www.yiiframework.com/extension/egmap/

Thanks for using EGMap

164

Antonio, could you write a simple example of using an address?

I have input data:

$address = ‘Czech Republic, Prague, Olivova’;

Can not use it.

Thank you in advance for your help.

UPD:

I have an example, but it does not work, where the error?




Yii::import('ext.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();

var_dump($geocoded_address->getLat());

var_dump($geocoded_address->getLng());

issues NULL

165

Is a bug, fixing it… thanks!

166

Bug fixed…

Nevertheless, will soon update the whole v3 geocode

Updated reverse geolocation with REST API v3 (thanks MATT CHEALE)

167

Hi all!

I am wondering whether it is possible to realize a lazy load approach like described here with EgMap (lazy load the whole map container)?

It seems Egmap->registerMapScript is outputting the script directly into the window, I have a problem to get this into a lazy loading structure. Am I correct the we need to override/rewrite this part completely?

Looking forward to your answers!

BR

Sebastian

EDIT: This example is more simple. So we just need to extend EGMap to output all map script into a function…

168

Very good point… I really like the lazy load approach (image swap, not the second link as the second link is like the DOM load, nearly).

I need to look on how to implement the image swap as the container relies on the parent style, maybe by setting the container’s position to be relative and then use z-index and top/left positions of the children would be enough. I will try… if you do it first, let me know ;) -aka GITHUB

169

Would be a great feature, but for our current project it is only a nice to have. Anyway, in case I find some spare time I am going to share the code for sure.

170

Hello,

and thanks for this extension.

I have been playing with [font="Lucida Console"]EGMapGeocodedAddress[/font] example, and a facing a little issue.

My form uses [font=“Lucida Console”]CTabView[/font], under one of this tabs I show multiple addresses with a [font=“Lucida Console”]CListView[/font]. When the form loads, it works fine and show the map for the first address, but when I switch to the next address the map disappear; and if I select the first address record, it wouldn’t show the first map.

Any clue ??

Thanks,

cbi

171

I need a bit more info to help you out:

How do you render the first time?

How do you re-render new addresses?

How the form is displayed? Do you recall the rendering each time an address is clicked?

This is how i would do:

I would create an unique an general map that is displayed on the tabs…

Information on the tabs are displayed just once so i do not need to re-render maps.

When i select a new address, then i change the center of the map and information is updated

In case map requires continuous loading, I highly recommend you to use static maps to speed up map rendering and use a button that will open a dynamic map on a popup window for example, if the user wishes to check or play with the dynamic map of google. IMHO it doesnt make sense to re-render dynamic maps constantly, it will slow down your application a lot.

EGMap will allow you to do that and much more.

172

Hola Antonio!

and thanks for your quickly answer.

Here is what I have right now:

  • _viewAddress.php:




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


$gMap = new EGMap();

$gMap->setWidth(480);

$gMap->setHeight(240);

$gMap->zoom = 15;


$this->widget('zii.widgets.CListView', array(

        'dataProvider' => $model,

        'itemView' => '_viewAddressDetail',

        'viewData' => array( 'gMap' => $gMap ),

    ));
  • _viewAddressDetail.php:

<div class="viewAddressDetail">


<table>

  <tr>

    <td style="vertical-align:top;">


      <?php echo '<h3>' . CHtml::encode( AgentAddress::getAddressType( $data->type ) ) . '</h3>'; ?>

      <br />


      <b><?php echo CHtml::encode($data->getAttributeLabel('address')); ?>:</b>

      <?php echo CHtml::encode($data->address); ?>

      <br />


(more of this)


    </td>

    <td>

      <?php


	$address = "{$data->address}, {$data->local}, {$data->state}, {$data->dictionaryCountry->text}";


	$geocoded = new EGMapGeocodedAddress($address);

	$geocoded->geocode($gMap->getGMapClient());




	// Creo que esto no se está ejecutando...

	$gMap->setCenter($geocoded->getLat(), $geocoded->getLng());


	$gMap->addMarker(

	         new EGMapMarker($geocoded->getLat(), $geocoded->getLng())

	);


	$gMap->renderMap();

      ?>

    </td>

  </tr>

</table>

</div>

I have changed to one unique map. But I don’t understand how to bind CListView click in order to update map information.

Thank you for any clue.

Best,

cbi

173

Hi, i have the same problem with jquery ui tabs.

I read that is something about checkresize of the map.

I tried this:

if (ui.panel.id == &quot;tabs-3&quot;) {


   resizeMap();


}

But it says:

resizeMap is not defined resizeMap();

Is there a way to resize the gmap?

thank you

By the way, EGMap rules :D

174

Glad you post this question as this is a common issue when you initially display the map hidden and then you show it… For that you need to trick as you did on your code but with a slight difference:




if (ui.panel.id == "tabs-3") {

       google.maps.event.trigger(HEREPUTYOURMAPID, 'resize');

    }

and it works… maybe if you include a small timeOut even better :)

Cheers

175

When you click on the link, you must have the lat/lng coordinates or make an AJAX call to a controller that will return the reversed geolocated address of that user… for example by sending its ID and returning its reversed data :)

Then when you have the lat/lng of the address, what you do is ‘clear’ the markers on the map and then add the new marker location with its info (if info_window attached to it)

What you are doing is advance… I am sorry do not have time to show by code example (I can even hardly update my blog anymore :( )

176

Hi all.

I tried to use the advance code on this page http://www.yiiframework.com/extension/egmap/ given by jonathan but problem was ajax was not calling the controller Action. and no action examples were given. so here is the solution

In case if other gets stuck with this problem here is solution

Extension examples did not show the code for controller but i have shown may be if it is correct admins may add it there.But it works like charm in my app


POST

to


GET

and URL Line




url:"'.$this->createUrl('hotel/savecoords').'/'.$model->id.'", '

to




url':'".$this->createUrl('hotel/savecoords', array('id'=>$model->id))."',`

and controller code is


 public function actionSaveCoords($id)

        {

            $model=$this->loadModel($id);


        // Uncomment the following line if AJAX validation is needed

                // 

        // $this->performAjaxValidation($model);

            if(isset ($_GET['lat']))

                $model->lat = $_GET['lat'];

            if(isset ($_GET['lat']))

                $model->long = $_GET['lng'];

            if($model->save())

                {

                    echo 'Thank you for registring your place with '.Yii::app()->name;  

                }

                $this->render('view',array(

            'model'=>$model,

        ));

        }
177

Hello Antonio,

really appreciate your advise.

This is how it has been solved:

1. first, a new js function has been added at [font=&quot;Lucida Console&quot;]_viewAddress.php[/font] (you can see that it is hardcoded the map id):


<script type="text/javascript">


function setNewCoords( lat, lng )

{

	google.maps.event.trigger( EGMap0, 'resize');


	var EGMapPosition = new google.maps.LatLng( parseFloat( lat ), parseFloat(lng) );

	var EGMapMarker = new google.maps.Marker({map:EGMap0, position:EGMapPosition});

	EGMap0.setCenter( EGMapPosition, 15 );

}


</script>




2. now, we need to call this function in order to update the map marker and set it center, this is the trick at [font=&quot;Lucida Console&quot;]CListView afterAjaxUpdate[/font] property:


$this->widget('zii.widgets.CListView', array(

        'dataProvider' => $model,

        'itemView' => '_viewAddressDetail',

        'viewData' => array( 'gMap' => $gMap ),

        'afterAjaxUpdate' => "js:function(id, data) { setNewCoords( document.getElementById( 'addressLat' ).value, document.getElementById( 'addressLng' ).value ); }"

    ));




3. the last modification was at [font=&quot;Lucida Console&quot;]_viewAddressDetail.php[/font], where we need to stamp the new coordinates for the given address:


$address = ExtendedActiveRecord::normalizeVowels( $data->address );

$address.= ", " . ExtendedActiveRecord::normalizeVowels( $data->local );

$address.= ", " . ExtendedActiveRecord::normalizeVowels( $data->state );

$address.= ", " . ExtendedActiveRecord::normalizeVowels( $data->dictionaryCountry->text );


$geocoded = new EGMapGeocodedAddress($address);

$geocoded->geocode($gMap->getGMapClient());


$gMap->setCenter($geocoded->getLat(), $geocoded->getLng());


$gMap->addMarker(

         new EGMapMarker($geocoded->getLat(), $geocoded->getLng())

);


echo CHtml::hiddenField( 'addressLat', $geocoded->getLat(), array( 'id' => 'addressLat' ) );

echo CHtml::hiddenField( 'addressLng', $geocoded->getLng(), array( 'id' => 'addressLng' ) );

I know there are a few things that could be better, but it works.

The only thing I don’t know how to update is if the [font=“Lucida Console”]CTabView[/font] has a different [font=“Lucida Console”]activeTab[/font] than the map tab (so the map isn’t visible when the page loads), where I could place the call to [font=“Lucida Console”]google.maps.event.trigger( EGMap0, ‘resize’);[/font] ??

BTW, how I get the [font=“Lucida Console”]id[/font] map ???

Thank you for your service to others.

cbi

178

Hello!

I’m triying to load an EGMap on a partial view. This is my code:

This is the ajax button which calls the action loadmap:


<?php echo CHtml::ajaxsubmitButton ("Press for geolocation",

                              CController::createUrl('organization/loadmap'), 

                              array('update' => '#formMap'));

            ?>

The action loadmap:


$this->renderPartial('_loadMap',array('model'=>$model),false,true);

And finally the partial view:




<div id="formMap">

    <?php

        

        $address = $model->address . ", " . City::model()->giveLocation($model->cityID);

        

        echo $address;

    

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

        

        $gMap = new EGMap();

        $gMap->zoom = 5;

        $gMap->width = '100%';

        $gMap->height = 200;


        $mapTypeControlOptions = array(

            'position'=> EGMapControlPosition::RIGHT_TOP,

            'style'=>EGMap::MAPTYPECONTROL_STYLE_DEFAULT,

        );


        $gMap->mapTypeId = EGMap::TYPE_HYBRID;

 

        $gMap->mapTypeControlOptions= $mapTypeControlOptions;

 

        // Create geocoded address

        $geocoded_address = new EGMapGeocodedAddress($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();


    ?>

</div>

The website loads the div but not the map. Any suggestion???

Thank you so much!!!

179

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?

2514

gmap.png.png

I tried this one “google.maps.event.trigger(HEREPUTYOURMAPID, ‘resize’);” but still doesn’t work… btw how do i get the mapid?

thanks

180

The problem is that the layer was hidden at first and then, when is shown the map doesnt render properly. Is a common problem… Normally, firing its resize method works, being on a CJuiDIalog you will also have to set a small delay (use setTimeout)

Another solution would be to have an IFRAME inside the CJuiDialog content with the src attribute pointing to the page that renders the map… you wont have problems with it.

To get the Id just use the getJsName() method of the map object.