Create a Google Maps Context Menu

Martin Pearman has released a right-click context menu library for the Google Maps API. ContextMenu creates a menu for Google Maps that appears when users right click on the map.

The menu could be used for a whole range of user interactions. Martin has created an advanced example map where the right-click menu has been used to allow users to set the start and end points to get driving directions. The right-click menu in this example also allows the user to zoom in and out and centre the map on the clicked location.

The code for the context menu has been made available under a GNU copyleft license. Here is a direct link to the JavaScript for the menu - ContextMenu.js

An Opacity Control Slider for Google Maps

Gavin Harris has released the code for an Opacity Control for Google Maps. The control is a slider button that can be used to adjust the opacity of map overlays used with the Google Maps API v3.

The slider control can be seen in action on NZ Topo Map, where it is used to control the transparency of topographic map tiles. The code is available for download and use by Google Maps API v3 developers under a Creative Commons Licence.

Heatmap.js for Google Maps

Heatmap.js is a new JavaScript library that can be used to generate web heatmaps with the HTML5 canvas element. The library can be used in any number of contexts, including with Google Maps.

There is a nice demo of the library, using random data, to create a heat map with Google Maps here, . You can even view and download the html behind the demo on github.

Introducing the Google Maps Label Library

MapLabel Utility Library

MapLabel is a very nice utility library for the Google Maps API that allows you to add labels to Google Maps.

Labels created with the utility are dynamically rendered on Google Maps using Canvas 2D. Developers can define the font size, the font face, color and alignment of the labels. I've created a demo of the library in action here, which (at the risk of seeming obsessive) places labels on a map of the 2012 London Olympics site.

One really useful feature in the library is the maxZoom and minZoom controls. These let you define at what zoom levels labels should be visible. In my example map above if you zoom in on the Westfield Shopping Mall the 'Westfield Shopping Mall' label disappears and a number of other labels become visible, showing the locations of individual stores.

If you want to know more check out the reference documents and the source code.

_________________

Introducing Google Map Libraries

Google Maps Javascript API V3 Geometry Library

One of the initial aims of V3 of the Google Maps API was to minimise the time it takes to load and display a Google Map. However if new features are added to the API and it grows in size the load time of the JavaScript grows as well.

The Google Maps team have therefore decided to implement libraries for the API. A library is a set of Maps API features that are only loaded when explicitly requested by the application. This request is added to the call to load the API, e.g.,

http://maps.google.com/maps/api/js?libraries=geometry

The Geometry Library is the first library to be added to the Google Maps API V3. The geometry library provides a set of utility functions for performing distance, heading, and area calculations in a spherical geometry, such as on the surface of the Earth, and also provides functions for handling encoded polylines.

Ed Parsons has provided a good explanation of why and how you might want to use the Geometry Library in a post called 'Because the world is not flat...'. You can also examine the library in more detail in the Maps API Documentation and Reference.

Via: Google Geo Developers Blog

________________