EGMap and renderPartial


(Fhurtado) #1

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!!!


(Ifithegr8) #2

Issue seems to be some where in view code.

try and paste following code in view and if you see a map then you know where is bug


<?php

//

// 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_<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='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>


(Serena Sorrentino) #3

Hi!

I have just started to use yii and egmap. I have the same problem. I would like to refresh the map markers by ajax. However, PartialRender with ajax does not work. I read about the use of Iframe insteaf of ajax, but I cannot figure out how to do that. Any idea or suggestion?

Thanks in advance!


(Duclik) #4

I had the same problem.

I think google api is not loaded when google.load is called. So Google doesn’t exists.

I didn’t find how call google api AFTER it is loaded. So I register the script in the page who called the ajax request.


public function actionView($id)

	{

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

        Yii::app()->getClientScript()->registerScriptFile('http://www.google.com/jsapi', CClientScript::POS_HEAD);

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

			'model' => $model,

		));

	}

In EGMap.php Line 494 Add callBack function:


CGoogleApi::register('maps', '3', array('callback' =>$this->getContainerId().'_init', 'other_params' => $params));

Delete


google.maps.event.addDomListener(window, "load",' . PHP_EOL . $this->_containerId . '_init);' . PHP_EOL;

And I modify last line by CClientScript::POS_HEAD because the scripts’s order should be modify:


Yii::app()->getClientScript()->registerScript($this->_containerId . time(), $js, CClientScript::POS_HEAD);

So, Google API is yet loaded when you do your ajax call, and your script is called after the google.load


(Alexey) #5

Hi, Clem. I had a same problem too. I also think that "google api is not loaded when google.load is called".

Thanks for your solution. :)


(Jahnarellano85) #6

I best regards, you can resolve this problem?


(Blizgaaya) #7

It’s not working I guess. First rendering map works because API JavaScript are loaded in ‘head’ tag so after renderPartial by ajax it won’t removed, plus renderPartial won’t register any JavaScripts too. Guess playing Google API as serverside isn’t that good solution though.