Attention! Do you have any ideas for reorganizing and updating the Mapki? Please leave a note here. Thank you!

Tools:Snippets

From Google Mapki

Jump to: navigation, search

>Knowledge Base

Contents

Please share any code snippets that you think might help other people playing with Google Maps. Please identify what the code is written in. i.e. PHP, Javascript, Python, etc... A lot of these have been correctly moved to the Map Projects pages.

[edit] GPS

[edit] Icons

This post seems to give a good jumping off point. But the idea is not well explained.
The link shows an example of how to be able to group icons and turn each group on and off with a click. More about it here: Discussion Thread 1 Discussion Thread 2
The link shows a simple example of how to be able to group icons and turn each group on and off with a click using documented calls from the API. simple example using the undocumented display(true)/display(false) methods
You should not link directly to images! Please download and host on your own server.
Shadows are created dynamically based on the icon's shape and scale. Almost any shape is possible.

[edit] infoWindow

  • See TLabel under Markers below
Similar to GInfoWindow. Benefits: you can open many at a time, they open outside the map (no more automatic panning of the map), and they can open in any direction. Plus documentation and examples.

[edit] Javascript

See your objects in a whole new light.
Just the ticket for showing grid ref's in the browser's status bar. First call WGS84ToOGB(myWgs84Lat,myWgs84Lon,0) to get an Ordnance Survey 1936 datum Lat Lon, then LLtoNE(myOgbLat,myOgbLon) to get eastings and northings on the British National Grid in metres and finally NE2NGR(myEast,myNorth) to get a 5 figure (1m) British National Grid Reference.
Code Snippets für Google Maps (scrollwheelzoom, pantopoint, getlatlon).
Getestet mit IE & Firefox und Opera.
Weitere Anwendungen wie LiveTracking und Mashups mit Geodatenbanken!

[edit] KML

PHP and JavaScript which makes it easy to embed KML overlayed on Google Maps into any web page. This solution also works around the problem of needed multiple Google Maps API keys for each directory on the web server.

[edit] Markers

KMLparser is a javascript function that allows you to load a kml file which may contain both tracks and placemarks/waypoints with descriptions and photos and very easy to use.
KMLMap is a snippet of Javascript that extends the Google maps API to allow adding markers from location-specific KML feeds.
TLabel allows you to embed any DOM object inside Google Maps. Here is another example. It's especially useful if you need to show an infoWindow but don't have enough content to fill it. A TLabel is only as large as it needs to be, and unlike the infoWindow, you can customize the look to your heart's content.
TLabel also enables you to define mouseover events for your map. Simply place a transparent label where you want the event, and handle the onmouseover event of your TLabel.
TLabel Version 2.0 is now available for testing. This is a compatibility update for API v2.
An unbelievable library of features.
PdMarker is an extension to GMarker, giving you the ability to change a marker's location, zIndex, cursor, graphic, add standard & enhanced tooltips, custom data, manage marker lists, zoom to markers, etc. GxMarker users can just swap libraries. Lots of code examples and full demo. PdMarker includes the features of GxMarker, but also does much more.
a easier way to add a marker label, but also has less features than TLabel. GxMarker development seems to have reached its furthest point of development now that there is PdMarker - this seems to be the case based on comments by GxMarker inventor J-Shirley on the Google Group.
You can use this js script to update the lat/lon positions of markers simply by point and click. This elimnates the hassles of hand updating values in XML or whatever database you are using. You click on the marker you want to change, and then click a new position for it. This script is raw and requires custom configuration.
Prototype functions to allow you to access your markers by id as well as group them into logical groupings.
Contains a simple small block marker, similar to Google's Rectangle sample. You can use loads of these without a performance hit. If you want an event, use the event code from the Arrow Overlay below.
Is a scaling polyline overlay with width given in Km not pixels. Demo;
This is a little exercise that shows how lines and arrows can be drawn without using SVG or VML. The lines are drawn with semi-transparent divs using the Bresenham line drawing algorithm. On the test page, a green line is rubber-banded from the mouse pointer, clicking the mouse drops a red arrow with its direction pointing away from the previous click. Two Overlay objects are used LineOverlay and ArrowMarker, both defined in http://www.bdcc.co.uk/DivOverlays.js.
Finally, I figured out how to do a custom overlay that works with VML on IE and SVG on Firefox. Plus it supports the click event. Latest version uses VML/SVG to draw the arrow head. The Arrow Overlay source is referenced from the Demo page.
  • Circle Overlay in SVG & VML This is a demo of filled and unfilled circles drawn as a custom overlay in IE using VML and Firefox using SVG. The radius of these circles is given in kilometers so that they scale as you zoom in and out. The circle has an outside line width colour, thickness and opacity. Fill is optional, with a defined colour and opacity. Source for the overlay is referenced from the Demo page.
Use the Java Script function scaleToRGB to scale a number between 0 and 1 to an HTML colour string ranging from violet to red. Handy with the Block Marker above to plot a scalar like temperature on a map. The source code is referenced from the Demo page.
  • Offsetable markers demo Using a subclassing of GMarker, you can drag overlapping markers apart leaving a rubber band line pointing to the actual marker location. dblLeftClick returns the marker to its actual position. You can pass an initial x and y pixel offset into the constructor. The same x,y pixel offset is used at all zooms. Source for the overlay is referenced from the Demo page.
A GMarker sublass which offers tooltip and hover image support, etc., plus documentation and examples.
A flexible, light-weight GOverlay subclass which offers tooltip and hover image support, etc., plus documentation and examples.
Create custom HTML markers. Robust and flexible interface, documentation, and examples.
As of version 17 of maps API, just use normal addOverlay() - See Aug 11 - ANNOUNCEMENT
A way to quickly plot hundreds of markers on a map by adding the addOverlays() prototype method. And here is another thread about addOverlays(), and you can test plotting speeds with this tool

[edit] OSX Dashboard Widgets and Plugins

This plugin will plot address from your OSX Address Book on Google Maps
Another OSX Address Book plugin. Significantly less documentation on this one.

[edit] Other

A stand-alone desktop tool.
Reports browser and platform information. Similar to what G_BROWSER used to be.
Handles the low-level busy work of custom control creation.
AJAX resource fetcher. Similar to GDownloadUrl - but with POST and synchronous request support.

[edit] Overlay WMS

[edit] Polylines

A discussion in Google groups with a little code about using the Google drawing engine to draw your own lines.
Chris Smoak of Bus Monster has put up some new drawing extensions with examples. As of July 28 Chris reports that he is still ironing out some bugs, but this is a good teaser and most work very well.
  • Shapefile to Lat/Lon List gives a user's experience with a piece of free software that allows you to convert a shapefile to a list of latitude/longitude points to create a GPolyLine.
  • Polyline Decode decodes a polyline's binary data into a usable latitude/longitude array. Written in PHP but easily adaptable to other languages.
  • Polylines tutorial describing how to read polylines from a MySQL database using PHP. In this example, the polylines are stored as OGC WKT.
  • For converting a list of points in lat/long to an encoded polyline, there is a Web-based Javascript tool (with excellent explanations!) and a perl version of the tool
  • Here is a sub-classing of GPolyline and GPolygon These provide a tooltip and click, mouseover and mouseout events as well as line dashing. Also there are functions to dynamically control color, opacity, weight and dash style. This code is for Firefox (SVG) and MSIE (VML) only.

[edit] Polygons

  • Here are sub-classings of GPolyline and GPolygon These provide a tooltip and click, mouseover and mouseout events as well as line dashing. Also there are functions to dynamically control line color, line opacity, line weight and dash style as well as fill colour and fill opacity. This code is for Firefox (SVG) and MSIE (VML) only.

[edit] Routing and Directions

  • GRoutes This package allows for the simple storage of different routes (basically polylines) along with associated markers; also provides a control that lets user select between the provided routes, out of which the currently selected one is displayed on the map.

[edit] Standalone

someone messed up the link, if anyone knows it or one please replace

[edit] Tiles

How to add your own custom map. Best when used with Automatic Tile Cutter below.
This Photoshop script is excellent for making your own maps. It will slice large images at any zoom level you tell it to, making thousands of image tiles and naming them correctly.
  • Add A Custom Hybrid MapType
Kyle Mulka has hacked his own hybrid maps. He layers two images at every tile in a mapType, just like google's Hybrid mode. If the title link stops linking to the Custom Hybrid Map try the page at Kyle's name. Here is some documentation: How To Overlay Custom Maps Using the Google Maps API
An example of putting one map on top of another and letting the user change the transparency level of the top map.
GMap extension allows you to embed alternate photos in the Google Maps interface.
TPhoto version 2.0 is now available for testing. This is mostly a compatibility update for API v2, but there are some other changes explained in the docs.
Calculates tile boundary values for any point. Useful for setting up a tile cutter.
  • Tile Cutter Use this c# program to cut tiles from a geo-referenced source image e.g. a .jpg file with an ESRI .jgw world file in lat/lon coordinates.

[edit] UI

A selection box (bounding box) to zoom into in Google Maps
Hook the mouse wheel to zoom. It will do a smooth zoom on Internet Explorer 6, and a normal zoom on Firefox. It's used in the panoramio page.
Puts extra map controls on your map including loading shape files.
Kyle Mulka offers a solution to allow you to automatically zoom to the best zoom level that contains all of the points in the array.
GZoom is a custom Google Maps control that allows you to zoom in on a region of a map by drawing a box around it. It's a single .js file with no dependencies, and it conforms to the standard GMaps custom controls API.
Easily create, sort, and manage sidebar lists of markers. Documentation and examples.

[edit] XML

Proposed Standard for XML use with Google Mapping API, including rich working example and GXmlHttp based parser code. Upgraded to version 2 of the API 05/18/2006.

[edit] Wiki

  • Plugin for MediaWiki by Mafs
    Has some minimal wiki type features for creating a map and markers in MediaWiki sites, the plugin also supports gpx data for displaying markers and/or polylines.
Retrieved from "http://mapki.com/wiki/Tools:Snippets"
Personal tools
Advertisement