Skip to main content

How can we help?

Search

EXAMPLE: Using Latitude, Longitude, Map Center, and Zoom Query Params

Updated: Josh Coyle Edited:

The interactive map uses query parameters to create customized map displays. See a full list of available query parameters here.

This example demonstrates using the query parameters lat, lng, and zoom. These query parameters can be used to set the map's center and zoom level dynamically. It also uses the sidebar hide  (sbh) parameter to keep the location sidebar from loading in the embed.

Parameter

URL Addition

Example Structure

Zoom 

z/

https://map.concept3d.com/?id=[mapID]#!z/10

Map Center 

mc/

https://map.concept3d.com/?id=[mapID]#!mc/[enter lat,long]

Side Bar Hide

 &sbh

https://map.concept3d.com/?id=[mapID]&sbh#!
NOTE: This is placed before the hash

 


  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Block Example</title>
    <script>
      function updateIframe(lat, lng, zoom) {
        let url = 'https://map.concept3d.com/?id=862&sbh';
         const iframe = document.getElementById('mapFrame');
        if(lat && lng) {
          url = `${url}#!mc/${lat},${lng}?z/${zoom}`;
        }
        iframe.src = url;
      };
    </script> 
  </head>
  <body>
    <div class="button-row">
      <button onclick="updateIframe(43.034305617005, -89.517345875502, 19)">Home</button>
      <button onclick="updateIframe(43.03406342399123, -89.51678560988245, 21)">Llamas</button>
      <button onclick="updateIframe(43.03436639033387, -89.51624549931535, 20.728)">School Bus</button>
      <button onclick="updateIframe(43.033429365428674, -89.51736666778152, 18.430)">Barn</button>
    </div>
    <iframe id="mapFrame" style="width: 1040px; height: 500px;" src="https://map.concept3d.com/?id=862&sbh" frameborder="0"></iframe>
   </body>
</html>

Related articles