<p>When conducting a proximity search, it's common practice to display a list of nearest locations, alongside a map displaying markers of nearest locations.</p>
<p>You may want each marker's <a href="https://plugins.doublesecretagency.com/smart-map/adding-marker-info-bubbles/" rel="nofollow noreferrer">info bubble</a> to open when clicking on the text link.</p>
<p>You'll need a JavaScript function to handle opening the info windows.</p>
<pre class="lang-js prettyprint-override"><code>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);

}
</code></pre>
<p>When you loop through your entries to generate the results list, you can attach an <code>onclick</code> event which calls your function.</p>
<pre class="lang-html prettyprint-override"><code>{% for entry in allEntries %}

    &lt;div onclick=&quot;openInfoWindow('smartmap-mapcanvas-1', 'myAddressField', {{ entry.id }})&quot;&gt;
        &lt;h3&gt;{{ entry.title }}&lt;/h3&gt;
        &lt;p&gt;{{ entry.myAddressField.distance }} miles away&lt;/p&gt;
    &lt;/div&gt;

{% endfor %}
</code></pre>
<p>For more information, check out the documentation for <a href="https://plugins.doublesecretagency.com/smart-map/manipulating-the-map-in-javascript/" rel="nofollow noreferrer">manipulating the map in JavaScript...</a></p>

CC BY-SA 4.0
2018-08-22T23:06:07.207Z
This is *almost perfect! The only issue I'm seeing is that the previous info window is not going away when I click another. Also, what would prevent the distance variable from showing?
Vaughn D. Taylor
CC BY-SA 4.0
2018-08-22T23:28:42.467Z
I just made an edit... there is now a loop which will close any open info windows.
Lindsey D
CC BY-SA 4.0
2018-08-22T23:35:09.163Z
That works great! Any recommendations on the missing distance variable?
Vaughn D. Taylor
CC BY-SA 4.0
2018-08-23T00:04:53.440Z
Are your entries being generated from a [proximity search](https://plugins.doublesecretagency.com/smart-map/sorting-entries-by-closest-locations/)? If not, the `distance` value won't be calculated.
Lindsey D
CC BY-SA 4.0
2018-08-23T00:09:03.550Z
I'm sorry, I must have missed that in the documentation. Where is this found in your docs? BTW, the plugin is great -- a big time saver -- and I appreciate the fast responses.
Vaughn D. Taylor
CC BY-SA 4.0
2018-08-23T00:10:05.780Z
No problem, glad you like it! :) https://plugins.doublesecretagency.com/smart-map/sorting-entries-by-closest-locations/
Lindsey D
CC BY-SA 4.0
2018-08-22T22:45:19.883Z
2021-01-01T07:10:29.977Z
2021-01-01T07:10:29.977Z
Lindsey D
<p>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.</p>

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

<plugin-smartmap><google-maps>
Trigger Info window in Smart Map using external navigation
# Trigger Info window in Smart Map using external navigation

(Asked by: username_0 on 2018-08-22)

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.
{{ entry.title }}

**Tags:** plugin-smartmap, google-maps


---

## 1 answers

### Answer by username_1 on 2018-08-22. Score: 2 | Accepted answer

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 %}

    
        {{ entry.title }}
        {{ entry.myAddressField.distance }} miles away
    

{% endfor %}

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

> **Comments:**
> **username_0**: This is *almost perfect! The only issue I'm seeing is that the previous info window is not going away when I click another. Also, what would prevent the distance variable from showing?  
> **username_1**: I just made an edit... there is now a loop which will close any open info windows.  
> **username_0**: That works great! Any recommendations on the missing distance variable?  
> **username_1**: Are your entries being generated from a [proximity search](https://plugins.doublesecretagency.com/smart-map/sorting-entries-by-closest-locations/)? If not, the `distance` value won't be calculated.  
> **username_0**: I'm sorry, I must have missed that in the documentation. Where is this found in your docs? BTW, the plugin is great -- a big time saver -- and I appreciate the fast responses.  
> **username_1**: No problem, glad you like it! :) https://plugins.doublesecretagency.com/smart-map/sorting-entries-by-closest-locations/  

---

