new version of map page

gistfile1.txt

<a name="map"></a>
<div class="map-wrapper">

<div class="map-search">

    {exp:gmap:search
        channel="offices"
        latitude_field="offices_latitude"
        longitude_field="offices_longitude"
        geocode_field="location"
        distance_field="distance_max"
        cache_post="false" 
	metric="kilometers" 
        return="{embed:the_user_language}/{segment_1}#map"}
     
        <ul>
            <!-- <li>
                <label for="title">Title</label>
                <input type="text" name="title_like" id="title" value="" />
            </li> -->
            <li>
                <label for="location">Location</label>
                <input type="text" name="location" id="location" value="{if post:location}{post:location}{/if}">
                {if error:location}<p class="error">{error:location}</p>{/if}
            </li>
            <li>
                <label for="location">Distance</label>
                <select name="distance_max">
                    <option value="" {if !distance_max || distance_max == ""}selected="selected"{/if}>Any
                    <option value="5" {if distance_max == 5}selected="selected"{/if}>5</option>
                    <option value="10" {if distance_max == 10}selected="selected"{/if}>10</option>
                    <option value="20" {if distance_max == 20}selected="selected"{/if}>20</option>
                    <option value="50" {if distance_max == 50}selected="selected"{/if}>50</option>
                    <option value="100" {if distance_max == 100}selected="selected"{/if}>100</option>
                </select>
            </li>
            <li>
                <button type="submit">Search</button>
            </li>
        </ul>      
         
    {/exp:gmap:search}
</div>{!-- /.map-search --}


{exp:gmap:init id="map" class="map-big" clusterGridSize="20"}
     
    {exp:gmap:results order_by="distance" sort="asc" parse="inward"}
     
        {if has_searched}

	<div class="rda-tile-wrapper">
        	{results}
		
		<div class="rda-tile smaller {switch="one|two|three|four"}">

			<h3><a href="{exp:transcribe:uri path="{embed:the_template_group}/details" cache="no"}{url_title}">{title}</a></h3>
			<div class="marker-address">
				{offices_city}
			</div>{!-- /.marker-address --}

			{offices_contacts}<div class="contacts {type}"><span class="label">{label}</span>{number}</div>{/offices_contacts}

			<span class="map-distance">{distance} km</span>

		</div>{!-- /.rda-tile --}
		{if count == "1" OR count == "8" OR count == "12" OR count == "16"}<div class="clear"></div>{/if}                

		{exp:gmap:marker id="map" latitude="{offices_latitude}" longitude="{offices_longitude}" icon="/images/interface/icons/map-marker.png"}

		<div>

			{if offices_logo}
			<div class="marker-logo">
				{exp:ce_img:size src="{offices_logo}" width="300" height="80" crop="no" allow_scale_larger="no"}
					<img src="{made}" alt="{title}"/>
				{/exp:ce_img:size}
			</div>
			{/if}
			<div class="marker-details smaller"> 

			<div class="marker-address">
			{if offices_logo == ""}<h3>{title}</h3>{/if}
        
			{offices_street1}
			{if offices_street2}<div>{offices_street2}</div>{/if}
			<div>{offices_city}, {offices_province}</div>
			<div>{offices_postalcode}</div>

			</div>{!-- /.marker-address --}

			{offices_contacts}<div class="contacts {type}"><span class="label">{label}</span>{number}</div>{/offices_contacts}

				</div>{!-- /.marker-address --}

				<a href="{exp:transcribe:uri path="{embed:the_template_group}/details" cache="no"}{url_title}" class="button smaller">{exp:transcribe:replace name="utilitynav_details"}</a> <a href="http://maps.google.com/maps?daddr={title}, {offices_street1}, {offices_city}, {offices_province}" class="button smaller" target="_blank">{exp:transcribe:replace name="utilitynav_directions"}</a>

		</div>

   		{/exp:gmap:marker}

            {/results}
		<div class="clear"></div>
	</div>{!-- /.rda-tile-wrapper --}
             
             
        {if:else}

		{exp:channel:entries channel="offices" category="4{if logged_in}|{visitor:global:categories_piped}{/if}" uncategorized_entries="no" limit="20" orderby="offices_reorder" sort="asc" dynamic="no" disable="member_data|pagination"}
                 
                {exp:gmap:marker id="map" latitude="{offices_latitude}" longitude="{offices_longitude}" icon="/images/interface/icons/map-marker.png" clustering="true"}

		<div>

			{if offices_logo}
			<div class="marker-logo">
				{exp:ce_img:size src="{offices_logo}" width="300" height="80" crop="no" allow_scale_larger="no"}
					<img src="{made}" alt="{title}"/>
				{/exp:ce_img:size}
			</div>
			{/if}
			<div class="marker-details smaller"> 

			<div class="marker-address">
			{if offices_logo == ""}<h3>{title}</h3>{/if}
        
			{offices_street1}
			{if offices_street2}<div>{offices_street2}</div>{/if}
			<div>{offices_city}, {offices_province}</div>
			<div>{offices_postalcode}</div>

			</div>{!-- /.marker-address --}

			{offices_contacts}<div class="contacts {type}"><span class="label">{label}</span>{number}</div>{/offices_contacts}

				</div>{!-- /.marker-address --}

				<a href="{exp:transcribe:uri path="{embed:the_template_group}/details" cache="no"}{url_title}" class="button smaller">{exp:transcribe:replace name="utilitynav_details"}</a> <a href="http://maps.google.com/maps?daddr={title}, {offices_street1}, {offices_city}, {offices_province}" class="button smaller" target="_blank">{exp:transcribe:replace name="utilitynav_directions"}</a>

		</div>

   		{/exp:gmap:marker}
     
		{/exp:channel:entries}

		{exp:gmap:center id="map" latitude="44.754535" longitude="-63.742676"}
		{exp:gmap:zoom id="map" zoom="7"}

		<div class="rda-tile-wrapper">

		{exp:channel:entries channel="offices" category="4{if logged_in}|{visitor:global:categories_piped}{/if}" uncategorized_entries="no" limit="20" orderby="offices_reorder" sort="asc" dynamic="no" disable="member_data|pagination"}

		<div class="rda-tile smaller {switch="one|two|three|four"}">

			<!--count: {index}-->

			<h3><a href="{exp:transcribe:uri path="{embed:the_template_group}/details" cache="no"}{url_title}">{title}</a></h3>
			<div class="marker-address">
				{offices_city}
			</div>{!-- /.marker-address --}

				{offices_contacts}<div class="contacts {type}"><span class="label">{label}</span>{number}</div>{/offices_contacts}

		</div>{!-- /.rda-tile --}
		{if count == "4" OR count == "8" OR count == "12" OR count == ""}<div class="clear"></div>{/if}
		{/exp:channel:entries}

		<div class="clear"></div>
		</div>{!-- /.rda-tile-wrapper --}

        {/if}
         
        {if no_results}

       	<div class="rda-tile-wrapper">
		<p>No results found</p>
	</div>{!-- /.rda-tile-wrapper --}

            {exp:channel:entries channel="offices" dynamic="no" disable="member_data|categories|category_fields|pagination" parse="inward"}
             
                {location_gmap id="map"}
                 
            {/exp:channel:entries}
         
        {/if}
         
    {/exp:gmap:results}


</div>{!-- /.map-wrapper --}