Yii and EGMap extension (Google Map) refresh map on checkbox changes

Question

I'm developing an interactive map using Yii framework and Yii egmap extension. I would like to refresh the map (ajax) when user click on checkboxes as shown in the picture: I'm only able to do it server-side (refresh the whole page) with the following code:

<?php
    Yii::app()->clientScript->registerScript('filterscript',"
        $('#filter_all').click(function() {
            $(\"input[name='filter\[\]']\").prop('checked', this.checked);
            window.location.href = 'http://' + window.location.host + window.location.pathname + '?tags=sale,rent,residential,commercial,agricultural';
        });
        $(\"input[name='filter\[\]']\").click(function() {
            var tags = '?tags=';
            var tmp=new Array();
            $('#filter_all').prop('checked', !$(\"input[name='filter\[\]']:not(:checked)\").length);
            $('input[type=checkbox]').each(function () {
                if (this.checked) 
                    tmp.push($(this).val());

            });
            tags += tmp.join(',');
            window.location.href = 'http://' + window.location.host + window.location.pathname + tags;
        });
        $('#filter_all').prop('checked', !$(\"input[name='filter\[\]']:not(:checked)\").length);
    ",CClientScript::POS_READY);
?>

And the map is generated using the EGMap extension with this code:

<?php

// Get latlong from location-aware web browser saved in cookie
if (isset($_COOKIE['latlng'])){
    list($lat,$long) = explode(',',htmlentities(htmlspecialchars(strip_tags($_COOKIE['latlng']))));
}else{
    $lat = 3.159553312559541;
    $long = 101.71481802016604;
}
Yii::import('ext.gmap.*');

$gMap = new EGMap();
$gMap->setJsName('map');
$gMap->zoom = 10;
$mapTypeControlOptions = array(
    'sensor'=>true,
    'position'=> EGMapControlPosition::LEFT_BOTTOM,
    'style'=>EGMap::MAPTYPECONTROL_STYLE_DROPDOWN_MENU
);

$gMap->mapTypeControlOptions= $mapTypeControlOptions;
$gMap->setWidth('100%');
$gMap->setHeight(500);
$gMap->setCenter($lat, $long);

$icon = new EGMapMarkerImage("http://".$_SERVER['HTTP_HOST'].Yii::app()->baseUrl."/images/bighouse.png");

$icon->setSize(32, 37);
$icon->setAnchor(16, 16.5);
$icon->setOrigin(0, 0);

// Status label
$status_type = array(
    0=>'success',
    1=>'warning',
    2=>'important',
    3=>'important',
);

$condition = '';
$sale_cond = '';
$rent_cond = '';

if ($match['sale']==='' && $match['rent']==='' && $match['residential']==='' && $match['commercial']==='' && $match['agricultural']===''){
    $condition = "AND (
        (MATCH (tags) AGAINST ('sale') 
        AND MATCH (tags) AGAINST ('residential'))
        OR
        (MATCH (tags) AGAINST ('rent') 
        AND MATCH (tags) AGAINST ('residential') )
        OR
        (MATCH (tags) AGAINST ('sale') 
        AND MATCH (tags) AGAINST ('commercial'))
        OR
        (MATCH (tags) AGAINST ('rent') 
        AND MATCH (tags) AGAINST ('commercial') )
        OR
        (MATCH (tags) AGAINST ('sale') 
        AND MATCH (tags) AGAINST ('agricultural'))
        OR
        (MATCH (tags) AGAINST ('rent') 
        AND MATCH (tags) AGAINST ('agricultural') )
    )";
}else{
    if ($match['sale']!=''){
        $sale_cond = "MATCH (tags) AGAINST ('sale')";
        if ($match['residential']!=''){
            $cond[1] = "(".$sale_cond." AND MATCH (tags) AGAINST ('residential'))";
        }
        if ($match['commercial']!=''){
            $cond[2] = "(".$sale_cond." AND MATCH (tags) AGAINST ('commercial'))";
        }
        if ($match['agricultural']!=''){
            $cond[3] = "(".$sale_cond." AND MATCH (tags) AGAINST ('agricultural'))";
        }
        if ($match['residential']!='' || $match['commercial']!='' || $match['agricultural']!=''){
            $sale_cond = implode(' OR ', $cond);
        }
    }
    if ($match['rent']!=''){
        $rent_cond = "MATCH (tags) AGAINST ('rent')";
        if ($match['residential']!=''){
            $cond[1] = "(".$rent_cond." AND MATCH (tags) AGAINST ('residential'))";
        }
        if ($match['commercial']!=''){
            $cond[2] = "(".$rent_cond." AND MATCH (tags) AGAINST ('commercial'))";
        }
        if ($match['agricultural']!=''){
            $cond[3] = "(".$rent_cond." AND MATCH (tags) AGAINST ('agricultural'))";
        }
        if ($match['residential']!='' || $match['commercial']!='' || $match['agricultural']!=''){
            $rent_cond = implode(' OR ', $cond);
        }

    }
    if ($sale_cond!=''){
        $condition = 'AND '.$sale_cond;
        if ($rent_cond!=''){
            $condition .= ' OR '.$rent_cond;
        }
    }elseif ($rent_cond!=''){
        $condition = 'AND '.$rent_cond;
    }
}

$props = Property::model()->findAll('active=1 '.$condition);
if ($props!==null){
    foreach ($props as $prop){
        // Prepare status label for info box
        $status_label='<span class="label label-'.$status_type[(int)$prop['status']].'">'.$list_status[(int)$prop['status']].'</span>';
        $prop_photo = '';
        $win_height = '110px';
        // Check if photo exist
        if (is_file('images/property/'.$prop['photo'])){
            $prop_photo = '<img src="http://'.$_SERVER['HTTP_HOST'].Yii::app()->baseUrl.'/images/property/'.$prop['photo'].'" /><br />'; 
            $win_height = '310px';
        }

        $email_img = '<img src="http://'.$_SERVER['HTTP_HOST'].Yii::app()->baseUrl.'/site/strtoimg?pid='.$prop['id'].'" />';

        $view_link = '<div style="float:left"><a href="'.Yii::app()->baseUrl.'/public/view/'.$prop['id'].'">View this property</a></div>';
        $edit_link = '';
        if (!Yii::app()->user->isGuest && (int)$prop['user_id']===(int)Yii::app()->user->id){
            $edit_link = '<div style="float:right"><a href="'.Yii::app()->baseUrl.'/prop/update/'.$prop['id'].'">Edit this property</a></div>';
        }
        $links = '<div>'.$view_link.'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'.$edit_link.'</div>';

        $info_window = new EGMapInfoWindow('<div style="height:'.$win_height.'">'.
                $prop_photo.
                substr($prop['description'],0,40).'...'.'<br />'.
                'Price: '.$prop['price'].'<br />'.
                'Email: '.$email_img.'<br />'.
                'Tel: '.$prop['contact_phone'].'<br />'.
                $status_label.' Added: '.$prop['date_upload'].'<br />'.
                $links.
                '</div>');
        $marker = new EGMapMarker($prop['latitude'], $prop['longitude'], array('title' => $prop['title'],'icon'=>$icon));
        $marker->addHtmlInfoWindow($info_window);
        $gMap->addMarker($marker);
    }
}
$gMap->renderMap();

?>

All these codes are in the view file. The map is generated by the EGMap extension in the html element with id EGMapContainer0. Any idea how to achieve refreshing the map via ajax in the event of checkboxes clicks?

Thanks.

Answer 1

I have been working with this map it is great and easy to use but the issues with it is you cannot use it with renderPartial it simply does not render.Only Solution is to Use an Iframe. Ajax Updation Simply does not work.