{"id":13247,"library":"google-maps-utility-library-v3-keydragzoom","title":"Google Maps V3 KeyDragZoom Utility","description":"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.","status":"maintenance","version":"2.0.9","language":"javascript","source_language":"en","source_url":"git://github.com/nmccready/google-maps-utility-library-v3-keydragzoom","tags":["javascript"],"install":[{"cmd":"npm install google-maps-utility-library-v3-keydragzoom","lang":"bash","label":"npm"},{"cmd":"yarn add google-maps-utility-library-v3-keydragzoom","lang":"bash","label":"yarn"},{"cmd":"pnpm add google-maps-utility-library-v3-keydragzoom","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"import { KeyDragZoom } from 'google-maps-utility-library-v3-keydragzoom';","symbol":"Side Effect Import","correct":"import 'google-maps-utility-library-v3-keydragzoom';"},{"note":"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.","wrong":"const KeyDragZoom = require('google-maps-utility-library-v3-keydragzoom');","symbol":"CommonJS Require","correct":"require('google-maps-utility-library-v3-keydragzoom');"},{"note":"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.","wrong":"import type { KeyDragZoomMap } from 'google-maps-utility-library-v3-keydragzoom';","symbol":"Type Augmentation (TypeScript)","correct":"/// <reference types=\"google.maps\" />\n// No explicit type import for this utility as it augments existing types."}],"quickstart":{"code":"import 'google-maps-utility-library-v3-keydragzoom';\n\nfunction initMap(): void {\n  const mapDiv = document.getElementById('map') as HTMLElement;\n  const map = new google.maps.Map(mapDiv, {\n    center: { lat: 34.0522, lng: -118.2437 }, // Los Angeles\n    zoom: 8,\n    mapTypeId: google.maps.MapTypeId.ROADMAP\n  });\n\n  // Enable KeyDragZoom functionality on the map instance\n  // By default, it uses the Shift key.\n  (map as any).enableKeyDragZoom({\n    boxStyle: {strokeColor: '#FF0000', strokeOpacity: 1, strokeWeight: 2, fillOpacity: 0.1, fillColor: '#FF0000'},\n    key: 'shift',\n    zoomOut: true // Allows zooming out by dragging up and left\n  });\n\n  // Add a listener to demonstrate activation\n  google.maps.event.addListener(map, 'idle', () => {\n    console.log('Map initialized and KeyDragZoom enabled (hold Shift and drag).');\n  });\n}\n\n// Make sure to load the Google Maps API script with your API key:\n// <script async defer src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap\"></script>\n\n// Dummy callback for local testing or if using an async script loader\n(window as any).initMap = initMap;","lang":"typescript","description":"Demonstrates initializing a Google Map and enabling the KeyDragZoom utility, configured to activate with the Shift key for drawing zoom rectangles."},"warnings":[{"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`.","message":"This 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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"This 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.","severity":"breaking","affected_versions":">=2.0.0"},{"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; } }`.","message":"The 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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"TypeError: map.enableKeyDragZoom is not a function"},{"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.","cause":"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`.","error":"ReferenceError: google is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}