Trigger Info window in Smart Map using external navigation

Question

I would like to trigger an info window in Smart Map using a navigation that lives beside the map. I've managed to figure out how to use the zoomOnMarker function, however, the info window does not pop with this function.

<a onclick="smartMap.zoomOnMarker('smartmap-mapcanvas-1', 'smartmap-mapcanvas-1.{{ entry.id }}.address', 15)">{{ entry.title }}</a>

Answer 1

When conducting a proximity search, it's common practice to display a list of nearest locations, alongside a map displaying markers of nearest locations.

You may want each marker's info bubble to open when clicking on the text link.

You'll need a JavaScript function to handle opening the info windows.

function openInfoWindow(mapId, fieldHandle, entryId) {

    // Prep to open info window
    var markerName = mapId + '.' + entryId + '.' + fieldHandle;
    var map        = smartMap.map[mapId];
    var marker     = smartMap.marker[markerName];
    var infoWindow = smartMap.infoWindow[markerName];

    // Close all open info windows
    for (var i in smartMap.infoWindow) {
        smartMap.infoWindow[i].close();
    }

    // Open new info window
    infoWindow.open(map, marker);

    // Zoom to marker
    var zoomLevel = 6;
    smartMap.zoomOnMarker(mapId, markerName, zoomLevel);

}

When you loop through your entries to generate the results list, you can attach an onclick event which calls your function.

{% for entry in allEntries %}

    <div onclick="openInfoWindow('smartmap-mapcanvas-1', 'myAddressField', {{ entry.id }})">
        <h3>{{ entry.title }}</h3>
        <p>{{ entry.myAddressField.distance }} miles away</p>
    </div>

{% endfor %}

For more information, check out the documentation for manipulating the map in JavaScript...