Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-22T23:06:07.207Z
Answers.Text: 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?
Answers.UserDisplayName: Vaughn D. Taylor
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-22T23:28:42.467Z
Answers.Text: I just made an edit... there is now a loop which will close any open info windows.
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-22T23:35:09.163Z
Answers.Text: That works great! Any recommendations on the missing distance variable?
Answers.UserDisplayName: Vaughn D. Taylor
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-23T00:04:53.440Z
Answers.Text: 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.
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-23T00:09:03.550Z
Answers.Text: 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.
Answers.UserDisplayName: Vaughn D. Taylor
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-23T00:10:05.780Z
Answers.Text: No problem, glad you like it! :) https://plugins.doublesecretagency.com/smart-map/sorting-entries-by-closest-locations/
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-08-22T22:45:19.883Z
Answers.LastActivityDate: 2021-01-01T07:10:29.977Z
Answers.LastEditDate: 2021-01-01T07:10:29.977Z
Answers.UserDisplayName: Lindsey D
Body: <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>
  
Tags: <plugin-smartmap><google-maps>
Title: Trigger Info window in Smart Map using external navigation
ThreadText: # 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.
  
  ```
  <a onclick="smartMap.zoomOnMarker('smartmap-mapcanvas-1', 'smartmap-mapcanvas-1.{{ entry.id }}.address', 15)">{{ entry.title }}</a>
  
  ```
  
  **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](https://plugins.doublesecretagency.com/smart-map/adding-marker-info-bubbles/) to open when clicking on the text link.
  
  You'll need a JavaScript function to handle opening the info windows.
  
  ```js
  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.
  
  ```html
  {% 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...](https://plugins.doublesecretagency.com/smart-map/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/  
  
  ---
  
  