Limiting the ability to pan to a single globe within the Google Maps API

I need help with restricting panning on a Google Maps API map to just one globe. By default, the map allows continuous panning east/west, causing it to repeat endlessly. I found a solution by henningj in response to this question

var allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(85, -180),
    new google.maps.LatLng(-85, 180)
);
lastValidCenter = map.getCenter();

google.maps.event.addListener(map, "center_changed", function() {
    if (allowedBounds.contains(map.getCenter())) {
        lastValidCenter = map.getCenter();
        return; 
    }

    map.panTo(lastValidCenter);
});

The current setup is not allowing any panning at all, as the 'contains' function always fails. When I log map.getCenter(), the values seem correct:

Object { A: 54.683366, F: 25.31663500000002 }

Can anyone point out what mistake I might be making?

javascriptgoogle-mapsgoogle-maps-api-3

Answer №1

Your allowedBounds are not properly defined. According to the guidelines:

LatLngBounds(sw?:LatLng, ne?:LatLng) creates a rectangle using the points at its south-west and north-east corners.

You currently have:

var allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(85, -180),
    new google.maps.LatLng(-85, 180)
);

It should be corrected to:

var allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-85, -180),  //sw
    new google.maps.LatLng(85, 180)     //ne
);

(Remember, negative longitudes are west of positive ones, and negative latitudes are south of positive ones)

See a demo in action here

Answer №2

To ensure a smooth user experience, it's important to set the Zoom Level appropriately and limit the minimum and maximum zoom levels.

var mapOptions = {
    center: new google.maps.LatLng(50.431487, 30.539285),
    zoom: 2,
    minZoom: 2,
    maxZoom:19,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When you reach a scrolling distance of over 300 vertical heights,

Is it possible to show and hide a class based on viewport height? I am familiar with displaying and hiding a class after a specified pixel height, but I'm wondering if it's achievable using viewport height instead? Specifically 3 times the viewp ...

javascripthtmlcss

Tips for transferring data between two forms in separate iFrames

I'm trying to achieve a functionality where the data entered in one form can be submitted to another form within an iframe. The idea is to allow visitors to preview their selected car in the iframe, and if satisfied, simply press save on the first for ...

javascriptjqueryformsiframe

The jst.js error in sails JS template indicates that the variable _ cannot be found

I am brand new to the world of programming and am currently diving into JavaScript and Sails JS. I must admit, I am enjoying the learning process so far, but recently encountered a problem that has left me scratching my head. Please bear with me as I may n ...

javascriptnode.jstemplatesunderscore.jssails.js

"Adjusting the height of a div element while considering the

I have 2 elements with different heights and I want to make them equal: var highestEl = $('#secondElement').height(); $('.element').first().height(highestEl); I understand that the second element is always taller than the first one. W ...

javascriptcsshtmlheight

Ensure the smooth scrolling feature is activated by adding an active class when either clicking or manually scrolling the

I have a script that enables smooth page scrolling, but I want it to automatically add an "active" class to the link corresponding to the section currently in view. While there are similar solutions out there, most of them only apply the class when the lin ...

javascriptjqueryhyperlink

Activate Google Map marker through an external click

I need help with implementing anchor buttons for different locations that highlight the location details on click. For example, when clicking on "location1" button, I want to highlight location1 on Google Maps. Check out the demo on JSFiddle google.maps.e ...

jqueryhtmlgoogle-mapsgeolocationmarker

Angular does not wait for the backend service call response in tap

Does anyone have a solution for subscribing to responses when the tap operator is used in a service? edit(status) { dataObj.val = status; // call post service with status.. this.service .update(dataObj) .pipe(takeUntil(this._n ...

javascriptangulartypescriptrxjs

What is the best way to ensure a cron job executing a Node.js script can access variables stored in an .env file?

Currently, I have a scheduled job using cron that runs a Node.js script. This script utilizes the dotenv package to access API keys stored in a .env file. Running the Node.js script from the command line retrieves the variables from the .env file successf ...

javascriptnode.jsubuntucronenvironment-variables

Is there a way to display the JavaScript widget exclusively on the homepage or main page

How can I limit the display of a Twitter widget on my blog page to only show on the main page and hide it when visitors navigate to sub-pages or individual blog entries? ...

javascripthtmltwitterblogs

Exploring the Difference Between $onChanges and $onInit in Angular Components

What sets apart the use of Controller1 compared to Controller2? angular.module('app', []) .component('foo', { templateUrl: 'foo.html', bindings: { user: '<', }, controller: Controller1, ...

javascriptangularjsangular-components

Develop React routes on the fly

Currently, I am working on a React App that requires the creation of Routes dynamically based on data models sent by the backend in JSON format. For example: { "Route1": [ { "id": 1, "visible": true, "other_data": "..." } ], "Route3": [ { "i ...

javascriptreactjspromisereduxredux-saga

Different ways to conditionally set the expanded prop for the Material UI TreeView component

I am currently working on implementing a tree select feature similar to the one found in antd's tree-select using material ui components. Specifically, I have a TextField and TreeView components from Material-UI stacked vertically. Initially, I want t ...

javascriptreactjstreeviewmaterial-uiantd

Leveraging Nextjs Link alongside MUI Link or MUI Button within a different functional component (varieties)

Currently in my development setup, I am utilizing Next.js (10.2) and Material-UI (MUI) with Typescript. In the process, I have implemented a custom Link component: Link.tsx (/components) [...] On top of that, I have created another iteration which functi ...

javascriptreactjstypescriptnext.js

Tips for sending data from an HTML page to an Angular custom element

I have successfully created an angular custom element from an angular component that I would like to call from a standard HTML page. The custom element requires a parameter, which functions properly when called as a component within an angular project. Ho ...

javascripthtmlangularcustom-element

Using React to map and filter nested arrays while also removing duplicates

Hello, I recently started working with react and I've encountered a challenge while trying to map an array. const fullMen = LocationMenuStore.menuItems['menu']['headings'].map((headings: any) => { <Typography>{ ...

javascriptreactjstypescript

Error encountered by React context: TypeError - Attempting to iterate over an object that is not iterable (unable to access property

I'm encountering this error: TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) whenever I attempt to handle state using useContext. The purpose here is to initialize "tokens" as an empty array [] on page load, and then ...

javascriptreactjsnext.js

Invoke a different route within Express Router when it needs to display a Not Found error (404)

Hey there, how are you? Below is the code I've been working on: const router = Router(); router.use( `${routePrefix}/v1/associate-auth/`, associateAuthRoutesV1(router) ); router.use( `${routePrefix}/v1/associate/`, JWTVerify, ...

javascriptnode.jsapiexpressexpress-router

Vue3 TypeScript may potentially have an object that is 'undefined'

This piece of code is Vue3 with TypeScript-based. export interface TenantDto { uuid: string; name: string; } export const useTenantStore = defineStore('tenant', { state: () => ({ tenants: [], }), actions: { setMyTenants: (pa ...

javascripttypescriptvue.jsvuejs3pinia

Tips on optimizing a setTimeout script for seamless integration with an HTML form

Here is the script: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> function addToCart() { document.getElementById("msgs-box").innerHTML = "Item added to cart s ...

javascriptjqueryhtmlajaxforms

React: An error has occurred - Properties cannot be read from an undefined value

THIS PROBLEM HAS BEEN RESOLVED. To see the solutions, scroll down or click here I've been working on a React project where I need to fetch JSON data from my server and render it using two functions. However, I'm encountering an issue where the v ...

javascriptreactjsjson