Prototype.js based Javascript library for quick and easy Google Maps integration.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
example.html
protomap.js
prototype.js

README.md

ProtoMap

JavaScript library for quick and easy creation of simple embedded Google Maps.

A Prototype.js conversion of Jevgenijs Shtrauss's goMap jQuery plugin, a wrapper for the Google Maps API v3. Codebase forked at version 1.3.

Usage

new Proto.Map(mapElement[, options]);
  • mapElement (string|DOMElement) The element or element id that you wish to turn into a google map. The map will be sized to fill the entire dimensions of the block element.
  • options Basic object containing the setup options.

Options

  • address The address/named location you want the map to start centered on. This value is a search string exactly as if you typed it into Google Maps' search field. If defined, this value overrides the latitude and longitude settings. Default: null
  • latitude / longitude These two values define the lat/long coordinates for the map to be centered on when it is created. Default: 37.0625 / -95.677068 (Central United States of America)
  • zoom Integer, Zoom level from 0 to 21. Default: 4
  • maptype String to determine what type of map is displayed (street, satellite, etc). Default: 'ROADMAP'

    • Choices: HYBRID, ROADMAP, SATELLITE, TERRAIN
  • navigationControl Boolean value indicating if the navigation controls (zoom, panning) are displayed. Default: true

  • navigationControlOptions Object, contains the settings for the navigation controls.
    • position String. Default: 'TOP_LEFT'
      • Choices: TOP, TOP_LEFT, TOP_RIGHT, BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, LEFT, RIGHT
    • style String. Note that this may be overridden by google if the element size is too small. Default: 'DEFAULT'
      • Choices: DEFAULT, ANDROID, SMALL, ZOOM_PAN
  • mapTypeControl Boolean value controlling is the map type selector is visible.
  • mapTypeControlOptions Object, contains the settings for the map type selector.
    • position String. Default: 'TOP_LEFT'
      • Choices: TOP, TOP_LEFT, TOP_RIGHT, BOTTOM, BOTTOM_LEFT, BOTTOM_RIGHT, LEFT, RIGHT
    • style String. Note that this may be overridden by google if the element size is too small. Default: 'DEFAULT'
      • Choices: DEFAULT, DROPDOWN_MENU, HORIZONTAL_BAR
  • scaleControl Boolean value to control is the current scale indicator is visible Default: false
  • scrollwheel Boolean value to control if the map responds to mousewheel events (zooming) Default true
  • disableDoubleClickZoom Boolean value to control if the map zooms when the user double clicks Default: false
  • streetViewControl Boolean value to control if the streetview control is present. Default: true
  • oneInfoWindow Boolean to control is multiple infowindows can be open at the same time. Default: true
  • hideByClick Boolean, enables clicking on a marker with infowindow content to toggle the marker's infowindow visibility Default: true
  • icon Icon to be used for new markers. See Marker Icons below for specification Default: null

  • addMarker Boolean or String value that enables the creation of markers by clicking on the map. Double-clicking a dropped marker will remove it. Default: false

    • false Feature Disabled
    • true|'multi' Allows creation of as many markers as the user wishes.
    • 'single' Only one user placed marker allowed. Subsequent clicks will move the marker to the new location.
  • markers Array of initial markers to be drawn when the map is created.

Other options for more precise control over how markers are created can be found within protomap.js

Marker Options

Markers are basic objects containing the location and options for the marker. This format is used both in the markers initialization option and in the .createMarker() function.

One of the following must be defined:

  • address The address/named location for the marker. This value is a search string exactly as if you typed it into Google Maps' search field. If defined, this value overrides the latitude and longitude setting.
  • latitude / longitude These two values define the lat/long coordinates for the map to be centered on when it is created.
  • position A Google Maps LatLng object

The remaining settings are optional:

  • title String displayed on the marker's tooltip, and the title of the infowindow if infowindow content is defined.
  • html Contents for the marker infowindow displayed when the user clicks on the marker. Can be a string, or an object with more options.
    • content String HTML contents for the window. If coupled with the ajax property, this content will display while the ajax request is made.
    • id ID of element to use as the window's contents
    • ajax URL of the page to request the content of the bubble from.
    • popup Boolean, display the infowindow when the marker is created.
  • icon Icon to be used for the marker. See Marker Icons specification below.
  • shadow Shadow to be used for the marker. Note that if the icon defines a shadow, this value is redundant. See Marker Icons specification below.
  • center Tells ProtoMap to auto-center on this marker when it is added.
  • draggable Boolean to control if the marker can be dragged

  • id String identifier unique to the specific marker. If omitted ProtoMap will create an auto-incremented value for the id.

  • group String identifier for grouping sets of markers together. Allows for showing/hiding of entire groups.
  • zIndex Integer for controlling overlap order of markers. By default all markers are 0 and overlap in the order they were added.
  • visible Boolean to control if the marker is visible when created.

Marker Icons

Icons can be defined in two ways. The simplest is a string containing a url for the image. The marker will be anchored on the bottom center of the image passed. For more control of a marker's icon you can also pass an object matching the GIcon format. The following are the options defined for GIcons.

  • image or url URL to the image to be used for the marker.
  • shadow URL to the image to be used for the marker shadow. Leave off if this is a
  • iconSize Object defining width and height values for the size of the image
  • shadowSize Object defining width and height values for the size of the shadow
  • anchor or iconAnchor Object defining x and y coordinates for the position on the image that should be directly over the marker location. Defaults to the center of the image on the bottom edge.
  • infoWindowAnchor Object defining x and y coordinates for the position on the image where the infowindow will be anchored.
  • maxHeight Integer defining the maximum distance that the marker will "rise" when being dragged.

Other options can be found on the google maps definition for the GIcon data type.

Instance Methods

getMap()

Returns the reference to the Google Map Object

createListener(element, event, handler)

Creates a new event listener.

  • element Object defining the element you wish to bind to.
    • {type:'map'}: Binds to the map itself. Map Events.
    • {type:'marker', marker:'markerid'}: Binds to a specific marker by name. Marker Events
    • {type:'info', marker:'markerid'}: Binds to the infowindow of a specific marker by name. InfoWindow Events
  • event String name of the event to listen for. See links above for event names.
  • handler A function or eventHandler to be executed when the event occurs.

Returns a google.maps.MapsEventListener object if called after all markers have finished being added to the map. Otherwise returns undefined.

removeListener(listener)

Removes a previously created listener from the map

  • listener The google.maps.MapsEventListener returned by the createListener function.

setInfoWindow(marker, html)

Sets the contents of a marker's infowindow.

  • marker Marker id string, or Marker object.
  • html New content to be placed in the window. See html property above.

fitBounds([type], [markers])

Causes the map to auto-zoom and center to fit the defined markers.

  • type The kind of fit to use
    • undefined|false|'all' Zooms to contain all markers on the map.
    • 'visible' Centers on the markers currently visible on the map.
    • 'markers' Centers to contain the markers defined in the passed array.
  • markers Array of marker id strings to be used for centering.

showHideMarker(marker, [state])

Toggles the visibility of a marker.

  • marker Marker id string, or Marker object.
  • state Optional boolean to set the visibility to a specific value. If omitted, marker will toggle.

showHideMarkerByGroup(group, [state])

Toggles the visibility of a group of markers.

  • group Group id string
  • state Optional boolean to set the visibility to a specific value. If omitted, markers will toggle.

getVisibleMarker(marker)

Returns the visible state of a marker as a boolean.

  • marker Marker id string, or Marker object

getMarkerCount()

Returns the total number of markers on the map.

createMarker(markerOptions)

Creates a new marker on the map using the passed options. See Marker Options above for format specification. Returns a google.maps.Marker if the marker location is defined via latitude/longitude or a google.maps.LatLng object. Markers defined with an address require an asynchronous geocode request before the Marker object is created.

removeMarker(markerId)

Removed the named marker from the map.

  • markerId String id of the marker to be removed.

clearMarkers()

Removes all markers from the map.

isVisible(latlng)

Returns a boolean indicating if the passed latitude and longitude point is currently viewable on the map.

  • latlng a google.maps.LatLng object representing the location.

Distributed under the MIT License

Copyright (c) 2011, Jarvis Badgley - chiper[at]chipersoft[dot]com
Copyright (c) 2011, Jevgenijs Shtrauss - pittss[at]gmail[dot]com

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.