4

How can I auto center and zoom my smartMap with multiple markers? Something like this:

var bounds = new smartMap.map.LatLngBounds();
smartMap.map.fitBounds(bounds);
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!

| improve this answer | |
  • 3
    flag - Not detailed enough answer. – Brad Bell Aug 13 '14 at 20:21
  • 1
    Ha. I almost kept going, but I was afraid I would break Stack Exchange. ;) – Lindsey D Aug 13 '14 at 20:22
1

UPDATE: You no longer need to apply fitBounds manually.

As of Smart Map 2.3.0, fitBounds will automatically be applied when rendering a map.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.