[bossm4]

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

[Afnan]

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

[serry]

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!

[Clem]

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

[Tiron]

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.

[debitsapalabras]

serry, on 09 June 2012 - 09:45 AM, said:

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!

I best regards, you can resolve this problem?