We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Only Essential Cookies
Accept All
MaterialsConsole

Camera Control

Map Moving

You can call the map.panTo(latLng) method to move the map center to a specified coordinate point.
<tr>
    <td>X/Latitude:</td>
    <td><input id="xLatInput" type="text" value="48.8"/></td>
</tr>
<tr>
    <td>Y/Longitude:</td>
    <td><input id="yLngInput" type="text" value="2.3"/></td>
</tr>

<script>
    var lat = Number(document.getElementById("xLatInput").value);
    var lng = Number(document.getElementById("yLngInput").value);
    map.panTo({lat: lat, lng: lng});
</script>

Map Shift

You can call the map.panBy(x, y) method to shift the map center by the specified x and y values (in pixels).
<tr>
    <td>X/Latitude:</td>
    <td><input id="xLatInput" type="text" value="100"/></td>
</tr>
<tr>
    <td>Y/Longitude:</td>
    <td><input id="yLngInput" type="text" value="100"/></td>
</tr>

<script>
    var x = Number(document.getElementById("xLatInput").value);
    var y = Number(document.getElementById("yLngInput").value);
    map.panBy(x, y);
</script>

Zoom Control

You can call the map.setZoom(zoom) method to specify the map zoom level, or call the map.zoomIn() or map.zoomOut() method to increase or decrease the zoom level by 1 respectively.
<tr>
     <td>Super Input:</td>
     <td><input id="superInput" type="text" value=""/></td>
</tr>

<script>
    var zoom = Number(document.getElementById("superInput").value);
    // Set the map zoom coefficient.
    map.setZoom(zoom);
    // Zoom in on the map by one level.
    map.zoomIn();
    // Zoom out on the map by one level.
    map.zoomOut();
</script>

Area Control

You can call the map.fitBounds(bounds) method to set the map display scope.
<tr>
    <td>SouthWestLat:</td>
    <td><input id="swLatInput" type="text" value="39.82"/></td>
</tr>
<tr>
    <td>SouthWestLng:</td>
    <td><input id="swLngInput" type="text" value="116.3"/></td>
</tr>
<tr>
    <td>NorthEastLat:</td>
    <td><input id="neLatInput" type="text" value="40.0"/></td>
</tr>
<tr>
    <td>NorthEastLng:</td>
    <td><input id="neLngInput" type="text" value="116.5"/></td>
</tr>

<script>
    var swLat = Number(document.getElementById("swLatInput").value);
    var swLng = Number(document.getElementById("swLngInput").value);
    var neLat = Number(document.getElementById("neLatInput").value);
    var neLng = Number(document.getElementById("neLngInput").value);
    map.fitBounds({
        sw: {lng: swLng, lat: swLat},
        ne: {lng: neLng, lat: neLat},
    });
<script>
Search in Guides
Enter a keyword.