Answers.Body: 
  <p>So for starters, let's clear something up for anyone visiting this thread:</p>
  <p>We're talking about <strong>JavaScript</strong>... specifically, how to manipulate a map that has <strong>already been generated</strong>. The official documentation on what kind of variables (maps/markers/info bubbles) which are created by the plugin <a href="https://plugins.doublesecretagency.com/smart-map/manipulating-the-map-in-javascript" rel="nofollow noreferrer">can be found here...</a></p>
  <p>Beyond that, you can basically do anything you want with those JS variables. Much of that is beyond the scope of what I can help you with, but I'll try to at least point you in the right direction.</p>
  <hr />
  <h3>Map JS object</h3>
  <p>The way you'll want to refer to the map is like this:</p>
  <pre class="lang-js prettyprint-override"><code>smartMap.map['smartmap-mapcanvas-1']
  </code></pre>
  <p>By default, the map will be called &quot;smartmap-mapcanvas-1&quot; (or 2, 3, etc). But this value can be easily overridden when creating your map, by <a href="https://plugins.doublesecretagency.com/smart-map/customizing-the-map-in-twig" rel="nofollow noreferrer">using the <code>id</code> parameter in your <code>options</code></a>.</p>
  <p>Now that you've got this map object, you can do anything you want via the <a href="https://developers.google.com/maps/documentation/javascript/reference#Map" rel="nofollow noreferrer">Google Maps API</a>.</p>
  <h3>Marker JS objects</h3>
  <p>When you're referring to <strong>individual markers</strong>, the format looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>smartMap.marker['smartmap-mapcanvas-1.100.myAddressField']
  </code></pre>
  <p>That naming scheme breaks into three separate components:</p>
  <ul>
  <li>Your map ID (&quot;smartmap-mapcanvas-1&quot;)</li>
  <li>The element ID (&quot;100&quot;)</li>
  <li>The field handle (&quot;myAddressField&quot;)</li>
  </ul>
  <p>Now that you've got this marker object, you can do anything you want via the <a href="https://developers.google.com/maps/documentation/javascript/reference#Marker" rel="nofollow noreferrer">Google Maps API</a>.</p>
  <h3>Info bubble JS objects</h3>
  <p>The format for <strong>marker info bubbles</strong> is nearly identical:</p>
  <pre class="lang-js prettyprint-override"><code>smartMap.infoWindow['smartmap-mapcanvas-1.100.myAddressField']
  </code></pre>
  <p>Now that you've got this info window object, you can do anything you want via the <a href="https://developers.google.com/maps/documentation/javascript/reference#InfoWindow" rel="nofollow noreferrer">Google Maps API</a>.</p>
  <h3>Debugging</h3>
  <p>Finally, since it's not always clear what maps, markers, and info bubbles have been created, you have these three functions available to you for debugging purposes...</p>
  <ul>
  <li><code>smartMap.listMaps()</code></li>
  <li><code>smartMap.listMarkers()</code></li>
  <li><code>smartMap.listInfoWindows()</code></li>
  </ul>
  <hr />
  <p>Beyond that, you're really just asking a standard JavaScript and Google Maps API question. I'd highly recommend searching Stack Overflow (or just a Google search) to get the best results on &quot;how to use fitBounds&quot; or &quot;how to zoom/center&quot; a map.</p>
  <p>Hope that helps!</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-13T20:21:01.993Z
Answers.Text: *flag* - Not detailed enough answer.
Answers.UserDisplayName: Brad Bell
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-13T20:22:17.443Z
Answers.Text: Ha. I almost kept going, but I was afraid I would break Stack Exchange. ;)
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2014-08-13T19:25:23.077Z
Answers.LastActivityDate: 2021-01-01T05:38:32.000Z
Answers.LastEditDate: 2021-01-01T05:38:32.000Z
Answers.UserDisplayName: Lindsey D
Answers.Body: <p><strong>UPDATE: You no longer need to apply <code>fitBounds</code> manually.</strong></p>
  <p>As of <a href="https://github.com/doublesecretagency/craft-smartmap/blob/v3/CHANGELOG.md#230---2015-12-04" rel="nofollow noreferrer">Smart Map 2.3.0</a>, <code>fitBounds</code> will automatically be applied when rendering a map.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2016-10-29T04:11:52.643Z
Answers.LastActivityDate: 2021-01-01T05:41:03.607Z
Answers.LastEditDate: 2021-01-01T05:41:03.607Z
Answers.UserDisplayName: Lindsey D
Body: <p>How can I auto center and zoom my <a href="https://plugins.doublesecretagency.com/smart-map/" rel="nofollow noreferrer">Smart Map</a> with multiple markers?
  Something like this:</p>
  <pre><code>var bounds = new smartMap.map.LatLngBounds();
  smartMap.map.fitBounds(bounds);
  </code></pre>
  
Tags: <templating><plugins><plugin-smartmap>
Title: How do you auto zoom/center Smart Map with multiple markers?
ThreadText: # How do you auto zoom/center Smart Map with multiple markers?
  
  (Asked by: username_0 on 2014-08-13)
  
  How can I auto center and zoom my [Smart Map](https://plugins.doublesecretagency.com/smart-map/) with multiple markers?
  Something like this:
  
  ```
  var bounds = new smartMap.map.LatLngBounds();
  smartMap.map.fitBounds(bounds);
  
  ```
  
  **Tags:** templating, plugins, plugin-smartmap
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2014-08-13. Score: 5
  
  So for starters, let's clear something up for anyone visiting this thread:
  
  We're talking about **JavaScript**... specifically, how to manipulate a map that has **already been generated**. The official documentation on what kind of variables (maps/markers/info bubbles) which are created by the plugin [can be found here...](https://plugins.doublesecretagency.com/smart-map/manipulating-the-map-in-javascript)
  
  Beyond that, you can basically do anything you want with those JS variables. Much of that is beyond the scope of what I can help you with, but I'll try to at least point you in the right direction.
  
  ---
  
  ### Map JS object
  
  The way you'll want to refer to the map is like this:
  
  ```js
  smartMap.map['smartmap-mapcanvas-1']
  
  ```
  
  By default, the map will be called "smartmap-mapcanvas-1" (or 2, 3, etc). But this value can be easily overridden when creating your map, by [using the `id` parameter in your `options`](https://plugins.doublesecretagency.com/smart-map/customizing-the-map-in-twig).
  
  Now that you've got this map object, you can do anything you want via the [Google Maps API](https://developers.google.com/maps/documentation/javascript/reference#Map).
  
  ### Marker JS objects
  
  When you're referring to **individual markers**, the format looks like this:
  
  ```js
  smartMap.marker['smartmap-mapcanvas-1.100.myAddressField']
  
  ```
  
  That naming scheme breaks into three separate components:
  
  * Your map ID ("smartmap-mapcanvas-1")
  * The element ID ("100")
  * The field handle ("myAddressField")
  
  Now that you've got this marker object, you can do anything you want via the [Google Maps API](https://developers.google.com/maps/documentation/javascript/reference#Marker).
  
  ### Info bubble JS objects
  
  The format for **marker info bubbles** is nearly identical:
  
  ```js
  smartMap.infoWindow['smartmap-mapcanvas-1.100.myAddressField']
  
  ```
  
  Now that you've got this info window object, you can do anything you want via the [Google Maps API](https://developers.google.com/maps/documentation/javascript/reference#InfoWindow).
  
  ### Debugging
  
  Finally, since it's not always clear what maps, markers, and info bubbles have been created, you have these three functions available to you for debugging purposes...
  
  * `smartMap.listMaps()`
  * `smartMap.listMarkers()`
  * `smartMap.listInfoWindows()`
  
  ---
  
  Beyond that, you're really just asking a standard JavaScript and Google Maps API question. I'd highly recommend searching Stack Overflow (or just a Google search) to get the best results on "how to use fitBounds" or "how to zoom/center" a map.
  
  Hope that helps!
  
  > **Comments:**
  > **username_2**: *flag* - Not detailed enough answer.  
  > **username_1**: Ha. I almost kept going, but I was afraid I would break Stack Exchange. ;)  
  
  ---
  
  ### Answer by username_1 on 2016-10-29. Score: 1
  
  **UPDATE: You no longer need to apply `fitBounds` manually.**
  
  As of [Smart Map 2.3.0](https://github.com/doublesecretagency/craft-smartmap/blob/v3/CHANGELOG.md#230---2015-12-04), `fitBounds` will automatically be applied when rendering a map.
  
  
  ---
  
  