Registry / gcp / google-maps-utility-library-v3-keydragzoom

google-maps-utility-library-v3-keydragzoom

library2.0.9jsnpmunverified

This package is a re-publication of the `KeyDragZoom` utility library for Google Maps JavaScript API V3, originally hosted on Google Code. Its primary function is to enable a 'drag zoom' feature on a Google Map, allowing users to draw a rectangle while holding a specified key (e.g., Shift, Ctrl) to zoom into that area. This utility fills a gap left by the discontinuation of Google Code hosting, which made the original `keydragzoom.js` resource inaccessible. The current stable version, 2.0.9, directly corresponds to the last official release from the original project. As a direct re-host, this package is effectively in maintenance mode with no active feature development or breaking changes since its original Google Code release; its main purpose is to ensure the utility remains available and installable via npm and Bower. It differentiates itself from core Google Maps functionality by providing a convenience layer for an advanced zoom interaction pattern not natively built into the basic API controls.

gcp

npm install google-maps-utility-library-v3-keydragzoom

github ↗package ↗

INSTALL

IMPORT

SIG · GOOGLE-MAPS-UTILIT

google-maps-utility-library-v3-keydragzoom

gcpjavascriptv2.0.9

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Side Effect Import

✓ import 'google-maps-utility-library-v3-keydragzoom';

✗ import { KeyDragZoom } from 'google-maps-utility-library-v3-keydragzoom';

This utility primarily works by modifying the global `google.maps.Map.prototype`, making `enableKeyDragZoom()` and `disableKeyDragZoom()` methods available on map instances. It does not export named symbols directly for ESM.

CommonJS Require

✓ require('google-maps-utility-library-v3-keydragzoom');

✗ const KeyDragZoom = require('google-maps-utility-library-v3-keydragzoom');

Similar to ESM, CommonJS usage primarily loads the script for its side effects, augmenting the global `google.maps` object. The `require` call itself does not return a useful object or constructor.

Type Augmentation (TypeScript)

✓ /// <reference types="google.maps" /> // No explicit type import for this utility as it augments existing types.

✗ import type { KeyDragZoomMap } from 'google-maps-utility-library-v3-keydragzoom';

TypeScript users will benefit from installing `@types/google.maps` to get core Google Maps types. This utility typically doesn't ship its own type definitions, relying on the augmentation of `google.maps.Map` which may require manual declaration merging or type stubbing for strict type checking.

Demonstrates initializing a Google Map and enabling the KeyDragZoom utility, configured to activate with the Shift key for drawing zoom rectangles.

import 'google-maps-utility-library-v3-keydragzoom'; function initMap(): void { const mapDiv = document.getElementById('map') as HTMLElement; const map = new google.maps.Map(mapDiv, { center: { lat: 34.0522, lng: -118.2437 }, // Los Angeles zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }); // Enable KeyDragZoom functionality on the map instance // By default, it uses the Shift key. (map as any).enableKeyDragZoom({ boxStyle: {strokeColor: '#FF0000', strokeOpacity: 1, strokeWeight: 2, fillOpacity: 0.1, fillColor: '#FF0000'}, key: 'shift', zoomOut: true // Allows zooming out by dragging up and left }); // Add a listener to demonstrate activation google.maps.event.addListener(map, 'idle', () => { console.log('Map initialized and KeyDragZoom enabled (hold Shift and drag).'); }); } // Make sure to load the Google Maps API script with your API key: // <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> // Dummy callback for local testing or if using an async script loader (window as any).initMap = initMap;

Debug

Known issues

gotchaThis utility library primarily modifies the global `google.maps.Map.prototype`. If `google.maps` is not available globally before this library is loaded (e.g., if you're dynamically loading the Google Maps API script or using a non-standard loading mechanism), the utility will fail to attach itself, leading to runtime errors.

fix

Ensure the Google Maps JavaScript API (e.g., `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY`) is fully loaded and `google.maps` is available on the global `window` object *before* importing or requiring `google-maps-utility-library-v3-keydragzoom`.

affects: >=2.0.0

breakingThis package is a re-host of a historical Google Maps V3 utility. It is not actively maintained or updated for newer Google Maps API versions (e.g., v3.50+). While it generally remains compatible, future breaking changes in the core Google Maps API could render parts of this utility non-functional without upstream updates.

fix

Regularly test the utility with new Google Maps API versions. Consider implementing similar drag-zoom functionality manually using `google.maps.Rectangle` and `map.fitBounds()` if stability and long-term maintenance are critical concerns.

affects: >=2.0.0

gotchaThe package does not provide official TypeScript type definitions. When used in a TypeScript project, direct calls like `map.enableKeyDragZoom()` will result in a 'Property 'enableKeyDragZoom' does not exist on type 'Map'' error. Casts (`as any`) are often required or custom declaration merging needs to be implemented.

fix

Use a type assertion (`(map as any).enableKeyDragZoom(...)`) or create a custom declaration file (e.g., `keydragzoom.d.ts`) to extend the `google.maps.Map` interface: `declare module 'google.maps' { interface Map { enableKeyDragZoom(options?: KeyDragZoomOptions): void; disableKeyDragZoom(): void; } }`.

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: map.enableKeyDragZoom is not a function

The `google-maps-utility-library-v3-keydragzoom` script was not loaded or executed correctly, or the `google.maps` object was not available when it ran, preventing it from augmenting the `Map` prototype.

fix

Ensure the Google Maps API script is loaded first and fully initialized, and then verify that the utility package is imported/required correctly and without errors. Check network requests for script loading issues.

ReferenceError: google is not defined

The Google Maps JavaScript API script has not been loaded or executed on the page before the `google-maps-utility-library-v3-keydragzoom` package attempts to access `google.maps`.

fix

Place the Google Maps API script tag (e.g., `<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>`) in your HTML `<head>` or before your application script, ensuring `callback=initMap` points to your map initialization function that subsequently imports this utility.

Upgrade

Version history

2.0.9latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

16 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/nmccready/google-maps-utility-library-v3-keydragzoom ↗

packagehttps://www.npmjs.com/package/google-maps-utility-library-v3-keydragzoom ↗