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

CC BY-SA 3.0
2014-08-13T20:21:01.993Z
*flag* - Not detailed enough answer.
Brad Bell
CC BY-SA 3.0
2014-08-13T20:22:17.443Z
Ha. I almost kept going, but I was afraid I would break Stack Exchange. ;)
Lindsey D
CC BY-SA 4.0
2014-08-13T19:25:23.077Z
2021-01-01T05:38:32.000Z
2021-01-01T05:38:32.000Z
Lindsey D
<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>

CC BY-SA 4.0
2016-10-29T04:11:52.643Z
2021-01-01T05:41:03.607Z
2021-01-01T05:41:03.607Z
Lindsey D
<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>

<templating><plugins><plugin-smartmap>
How do you auto zoom/center Smart Map with multiple markers?
# 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 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...
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:
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.
Now that you've got this map object, you can do anything you want via the Google Maps API.
Marker JS objects
When you're referring to individual markers, the format looks like this:
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.
Info bubble JS objects
The format for marker info bubbles is nearly identical:
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.
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.


---

