0

I'm using Google Maps for ExpressionEngine to create a store locator.

This is the code I'm using to display the results.

{exp:gmap:init id="map" scrollwheel="false" class="distributor-map"}
{exp:gmap:results order_by="distance" sort="asc" match_categories_exact="true" parse="inward"}
    {if has_searched}
        <ul>
        {results}
            <li>{title} - {distance}</li>
        {/results}
        </ul>
        {results}                   
            {exp:gmap:marker id="map" show_one_window="true" latitude="{location_lat}" longitude="{location_lng}" geocode="false" clustering="true"}
                <h4>{title}</h4>
                {address}<br />
                {distributor_postcode}
                {if contact_number}
                    <br />
                    <i class="fa fa-phone"></i> {contact_number}
                {/if}
            {/exp:gmap:marker}      
        {/results}       
    {if:else}
        {exp:channel:entries channel="distributors" dynamic="no" disable="member_data|pagination" parse="inward"}   
            {location_gmap id="map"}    
        {/exp:channel:entries}
    {/if}

    {if absolute_count == 1}
    <p><em>Hint: Try searching for 'Hoosier National Forest' at a distance of 20 miles.</em></p>
    {/if}

    {if no_results} 
        <p>No results found</p>     
        {exp:channel:entries channel="distributors" dynamic="no" disable="member_data|pagination" parse="inward"}   
            {location_gmap id="map"}
        {/exp:channel:entries}
    {/if}   
{/exp:gmap:results}

I'd like to add a link around the title and distance that will open the info window.

<ul>
    {results}
        <li>{title} - {distance}</li>
    {/results}
</ul>

Could someone please point me in the right direction?

Thanks

Wayne

  • What do you mean "open the info window"? Like a lightbox? Open a new tab to an information page? – jrothafer Jul 16 '15 at 13:31
  • I want it to open the corresponding marker on the map – Deswork Jul 16 '15 at 13:48
  • Does the {exp:gmap:marker} actually output information anywhere on the page, or is the markup in that tag only show up when you click the marker on the map? Sorry, I'm narrowing down an answer for you. – jrothafer Jul 16 '15 at 14:00
  • I beleive it's just for displaying the markers on the map. The exp:gmap:marker tag is a standalone method for adding markers to your map. This method is great to use inside of looping tags such as channel:entries or Matrix variable pairs. – Deswork Jul 16 '15 at 14:04
0

Well, first, you need to associate your list item tags with the corresponding markers. If the {exp:gmap:markers} tag only outputs DOM elements for the map and nothing that shows automatically, you can first reduce your loops by one for association:

    {results}
        <li>
            <a href="#" class="marker_link" data-markerclass="marker_box_{result:entry_id}">
                {title} - {distance}
            </a>
        </li>
        {exp:gmap:marker id="map" show_one_window="true" latitude="{location_lat}" longitude="{location_lng}" geocode="false" clustering="true" class="marker_box_{result:entry_id}"}
            <h4>{title}</h4>
            {address}<br />
            {distributor_postcode}
            {if contact_number}
                <br />
                <i class="fa fa-phone"></i> {contact_number}
            {/if}
        {/exp:gmap:marker}
    {/results}

This gives you a link with the class and data link (example)

class="marker_link"
data-markerclass="marker_box_42"

and the infobox has a class of

class="marker_box_42"

And from there, you can just jam some JavaScript on the bottom of your page. This is a an approximation and you will need to modify it to fit your code:

$(document).ready(function(){
    $(".marker_link').click(function(e){ 
        e.preventDefault();
        var class = $(this).data("markerclass"); // = "marker_box_42"

        /*
        here you have to do your research on the gmaps JS api,
        to figure out the method to show a marker based on it's class name.
        but now you have the class of the info box you want to pop-up
        in jquery, it might be as simple as this 
        */

        $(class).show();

    });
});

Thaaat should get you there, or really close to your solution.

  • I know it's been nearly a year since this was started but nothing came of the project. I now need to revisit and I'm having the same problem. I've tried the code above and search for hours and still can't find a solution. Could someone please help me out. – Deswork Jun 2 '16 at 13:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.