Customizing Google Maps

Main Map

MapDist.de

Offers search, directions, distance measurement and much more and more to come.

Miscellaneous Examples (v3 Maps API)

dropdown.html

Change the map types with a cross-browser compatible dropdown box.

last-result.html

Add a transparent last result button in the middle of panControl like Google Maps.

textualsave.html

Save the current map location to return to it from any other location.

textualzoom.html

Zoom in and out with buttons outside of the map.

tabbed-maps.html

Toggle between different maps inside tabs.

toggle-cats.html

Toggle the markers on the map and simultaneously their associated links in the sidebar.

streetview-map.html

Add a collapsible overview mini-map in the bottom corner of street view panoramas.

mzs-clusterer-plus.html

Combine MaxZoomService with Clusterer to avoid zooming in to black areas where satellite imagery is not available.

Layout

liquid-layout.html New

Maximize usability with a functional and clean liquid layout as Google Maps.

Drag'n Drop +

drag-from-outside.html

Drag objects to the map from the document tree. The objects should also be draggable on mobile phones.

map-in-a-box.html

Load a map in a draggable and resizable div element.

Info Windows

drag-from-infowindow.html

Drag objects to the map from the info window.

marker-jumping.html

Open the info window of the next marker by clicking on a link in the current info window.

tabbed-infowindow.html

Use completely customizable tabs in info windows without any additional library. Even Streetview tabs and mini maps are easy to integrate.

Changing the Content of Info Windows

picture-gallery.html

Change the content of info windows using Javascript in an iframe.

change-iw-content-ajax.html

Change the content of info windows using Ajax.

Tooltips

custom-tooltips.html

Add movable tooltips to your markers.

cursor-tooltip.html

Press Shiftkey to display the LatLng coordinates of the cursor position in a tooltip.

fading-labels.html New

Enhance overlays with customizable fading labels.

Layer Overlays

more-button.html

Hover over the 'More button' to display certain layers on the map.

glide-panel.html

As an alternative to the 'More button' you may try a glide panel that mimics the panel of Google Maps somewhat. But it's really cooler.

Polylines and Polygons

polylines.html

Draw polylines between removable markers.

arrow-heads.html

Display polylines with arrow heads also on v3 maps.

flexible-polygon.html

Draw resizable polygons and calculate the area on the fly. The polygons are made additionally draggable.

switch-polies.html

Switch between resizable polylines and polylgons.

snapable-lines.html New

Create even more flexible polylines and insert intermediate line points.

KML and KMZ

kml-shapes.html

Toggle KML and KMZ overlays.

Map Animation

anim.html

Pan the map automatically from marker to marker and open the corresponding info window.

Sounds

sounds.html

Play sound files at specified events.

Previous Examples (v2 Maps API)

Directory Listing (v2)

Libraries (v2)

ContextMenuControl 1.0

This lets you add a comfortable context menu with just one line of code. You can add up to 25 draggable markers to change directions.

ExtMapTypeControl 1.4

Improved and extended with More...Button.