• Stars
    star
    207
  • Rank 189,769 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 15 years ago
  • Updated about 13 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

jQuery plugin for creating Google Maps from semantic markup

jMapping - Google Maps jQuery Plugin

This plugin is designed for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.

Links

Graceful degradation and Semantic Expectations

This plugin tries to allow as much graceful degradation as possible by having the HTML be as semantic as possible. The plugin expect the HTML for the locations to be grouped under a common element. Additionally, it expects the links and Map Info Window content to be grouped under the location elements. It also expects the necessary metadata to be on the location element. This way the HTML semantically reflects that all of those parts and information are associated with the specific location or place.

Basic Usage

Download the necessary dependencies and jMapping.

Make sure you include the necessary scripts in your page:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=false"></script>
<script type="text/javascript" src="markermanager.js"></script>
<script type="text/javascript" src="StyledMarker.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.jmapping.js"></script>

Make sure your HTML has a div element for the Google map, and there is a container element with some locations and their data. The data by default is expected to be on the "data-jmapping" attribute of the location (this can be configured):

<div id="map"></div>

<div id="map-side-bar">
  <div class="map-location" data-jmapping="{id: 5, point: {lat: 35.925, lng: -79.053}, category: 'Gas'}">
    <a href="#" class="map-link">Some Place</a>
    <div class="info-box">
      <p>Some thing for the info box.</p>
    </div>
  </div>
  <div class="map-location" data-jmapping="{id: 8, point: {lat: 35.935, lng: -79.024}, category: 'Food'}">
    <a href="#" class="map-link">Another Place</a>
    <div class="info-box">
      <p>Example Text.</p>
    </div>
  </div>
</div>

Then just call the jMapping function on the map element:

$(document).ready(function(){
  $('#map').jMapping();
});

If you need to change the markers on the map, usually for some type of pagination, this can be done by simply updating the content of the "side-bar" container to contain new location data and then calling the update function:

$('#map-side-bar').load('ajax/path/file.html', nil, function(){
  $('#map').jMapping('update');
});

OR

$('#map-side-bar').load('ajax/path/file.html', nil, function(){
  $('#map').data('jMapping').update();
});

Options

These are options that can be passed to the jMapping function to change specific settings.

  • side_bar_selector:
    • Default: "#map-side-bar:first"
    • This defines the selector where location items will be searched for within.
  • location_selector:
    • Default: ".map-location"
    • This defines the selector for location items. This is the element that the metadata needs to be associated with. The plugin will look for items matching this selector inside of the side bar element.
  • link_selector:
    • Default: a.map-link
    • This selector defines the link that will be used to "activate" a marker on the map. If info window elements are provided the HTML inside of them will be loaded into the pop up window when these links are clicked. You should set this value to false if you do not wish to use this functionality. These links will be searched for inside of the location elements specified in the location_selector.
  • info_window_selector:
    • Default: ".info-box"
    • This selector defines where the content for the Google Maps info window for each location marker is. This element will be searched for inside of the location elements specified in the location_selector. If no element is found no Info Window will be attached to the marker.
  • default_point:
    • Default: {lat: 0.0, lng: 0.0}
    • This point determines the Google Maps location if there are no location elements inside the specified location_selector.
  • metadata_options:
    • Default: {type: "attr", name: "data"}
    • This is the set of options passed to the jQuery metadata function. It defines how the necessary metadata for each location will be searched for. See the metadata plugins docs for more info.
  • info_window_max_width:
    • Default: 425
    • This specifies what the max width of the Google Maps Info Windows can be when a marker is activated. Otherwise it will expand to fit the width of the content.
  • map_config:
    • Default: N/A
    • This can be set to a MapOptions object. Which is just a normal object {} with specific properties that become the settings for the map.
  • category_icon_options:
    • Default: N/A
    • By default the plugin will use the default Google Maps marker icon. But you can use this option to specify what options to pass to the StyledMarker based on category data associated with the location. It accepts 2 types of values: an object or a function.
      If the setting is to an object it will take the category data on the location and look for a key on the object that matches and return that value. If there is no value for the supplied category, it will return the value specified in the "default" key.
      If the setting is set to a function it will call the function and pass the value for the category data to the function, returning the result. This can be used for more complicated logic and for using something other then just string data in the category, such as an object with multiple data attributes it's self. The object values for the associated category key or the function should return one of three data types:
      1. A string, this will be used as the image source for the marker icon.
      2. A google.maps.MarkerImage, this will be used as the icon for the Marker object.
      3. An object that has valid options for a StyledIcon object.
  • default_zoom_level:
    • Default: N/A
    • Use this option to set the default zoom level for your map. Normally, zoom level is set dynamically based on the position of locations being mapped. But, in some cases, like viewing a single mapped location, you may wish to set a default zoom level. Zoom level values should be between 1 and 20. Neighborhood level is approximately 15.
  • force_zoom_level:
    • Default: N/A
    • This will force the map to always be rendered at this zoom level.
  • always_show_markers:
    • Default: false
    • Set this option to true if you wish to display markers on all zoom levels. (Normally, the markers may only be visible on certain zoom levels, depending on the normal bounds and zoom level of the marker data.)

Object API

The jMapping API object is available from the "jMapping" data value on the selector passed to the original $().jMapping function.

For example:

$('#map').jMapping();
$('#map').data('jMapping'); // returns the jMapping API object

The API of that object:

  • gmarkers:
    • The google.maps.Marker objects that have been placed on the map. Stored in an object where the keys are the id's are those provided in the metadata
  • settings:
    • The settings for this jMapping instance.
  • mapped:
    • Did the plugin create the map and markers as expected or not.
  • map:
    • the google.maps.Map Google Map API object.
  • markerManager:
    • The Google Maps MarkerManager object for manipulating groups of markers, has control over all markers on the map.
  • gmarkersArray:
    • Returns an array of all the markers currently on the map.
  • getBounds:
    • The Google Maps google.maps.LatLngBounds bounds object for all the markers on the map.
  • getPlaces:
    • Returns the set of jQuery objects for the place DOM Elements.
  • getPlacesData:
    • Returns an array of all the metadata for each place returned by getPlaces
  • update:
    • Used to update the map if the HTML DOM for the locations has changed.

Event API

There a number of events that fire as jMapping is used.

  • beforeMapping.jMapping
    • This fires immediately before the main functionality of the plugin begins and is passed the settings object. If it returns false the mapping will be canceled.
  • afterMapping.jMapping
    • This fires immediately after the plugins mapping has finished, passes in the jMapping API object.
  • beforeUpdate.jMapping
    • This fires right before the map is updated via the "update" method. The jMapping API object is passed to the callback. If the callback returns false the update will be canceled.
  • afterUpdate.jMapping
    • This fires immediately after the map is updated.
  • markerCreated.jMapping
    • This fires right after a map marker is created, the marker object is passed to the callback.

Dependencies

License

Copyright (c) 2009-2011 Brian Landau (Viget Labs)
MIT License: http://www.opensource.org/licenses/mit-license.php

More Repositories

1

blendid

A delicious blend of gulp tasks combined into a configurable asset pipeline and static site builder
JavaScript
4,986
star
2

gulp-rails-pipeline

Ditch the Rails Asset Pipeline and roll your own with Gulp
Ruby
646
star
3

Twitter-Bootstrap-for-Omnigraffle

Omnigraffle stencil, template, and color picker modeled after Twitter Bootstrap
585
star
4

microcosm

Flux with actions at center stage. Write optimistic updates, cancel requests, and track changes with ease.
JavaScript
487
star
5

react-ink

A React component for adding material design style ink
JavaScript
325
star
6

colonel-kurtz

A Block Editor
JavaScript
318
star
7

sass-json-vars

Import variables as JSON into Sass
Ruby
294
star
8

grunt-complexity

A JavaScript complexity analysis grunt task.
JavaScript
221
star
9

sprig

Relational seeding for Rails apps
Ruby
208
star
10

olive_branch

Handle camel/snake/dash case conversion
Ruby
180
star
11

acts_as_markup

Represent ActiveRecord Markdown, Textile, or RDoc columns as Markdown, Textile, or RDoc objects using various external libraries to convert to HTML.
Ruby
123
star
12

active_admin_associations

This extends ActiveAdmin to allow for better editing of associations.
Ruby
120
star
13

whitespace-tmbundle

TextMate bundle to remove trailing whitespace & tabs
115
star
14

capistrano_rsync_with_remote_cache

A deployment strategy for Capistrano 2.0 which combines rsync with a remote cache, allowing fast deployments from SCM servers behind firewalls.
Ruby
102
star
15

serialize_with_options

Simple XML and JSON APIs for your Rails app
Ruby
92
star
16

cachebar

A simple API caching layer built on top of HTTParty and Redis
Ruby
88
star
17

redirector

A Rails engine that adds a piece of middleware to the top of your middleware stack that looks for redirect rules stored in your database and redirects you accordingly.
Ruby
83
star
18

react-focus-trap

Traps focus for accessible dropdowns and modal content
JavaScript
81
star
19

stat_board

Simple dashboard of records created this week, this month, and all time, mountable as a Rails Engine.
Ruby
79
star
20

ensure-animation

Ensure animation runs until class loaded
JavaScript
76
star
21

nav_lynx

Rails helper to generate navigation links with a selected class.
Ruby
75
star
22

simplest_auth

Simple implementation of authentication for Rails
Ruby
73
star
23

tailwindcss-plugins

A collection of plugins for Tailwind CSS
JavaScript
58
star
24

interactive-wcag

A filterable and shareable version of the WCAG 2.0 spec.
46
star
25

storyboard

For making ADVENTURES
TypeScript
43
star
26

jquery.transport

Transport elements to other containers based upon media queries.
JavaScript
42
star
27

ruby-string-showdown

Double vs Single Quoted Ruby Strings... Which will emerge victorious??
Ruby
39
star
28

trackomatic

A high-performance tracking enhancement for Google Analytics.
JavaScript
34
star
29

an-isomorphic-chart

Charts are for everyone. A pending blog post.
JavaScript
33
star
30

otp

One-time pad programming exercise
Ruby
31
star
31

ruby_spark

Ruby Gem to make API calls to the Spark Cloud
Ruby
31
star
32

ars-arsenal

A react gallery picker
TypeScript
30
star
33

json-weight

Measure the weight of a JSON endpoint
JavaScript
30
star
34

augmented-card

Example project for ARKit Image Tracking blog post
Swift
29
star
35

simplest_status

Simple status functionality for Rails models.
Ruby
28
star
36

craft-color-swatches

PHP
27
star
37

ca11y

A lightweight accessible dependency-free datepicker
JavaScript
26
star
38

watch-dog

Monit + Sinatra + Monk + SQLite + Mustache = multi-site dowtime alert app
Ruby
25
star
39

jambells

HQ/Boulder Pointless Weekend Project
Elixir
25
star
40

craft-localeredirector

Craft plugin for detecting user language preferences and redirecting to the appropriate locale.
PHP
24
star
41

craft-videoembed

Craft plugin to generate an embed URL from a YouTube or Vimeo URL.
PHP
24
star
42

ffeud

Elixir
23
star
43

platomformio

Integration Atom IDE with PlatformIO
CoffeeScript
23
star
44

jest-with-nightmare

JavaScript
22
star
45

craft-profile

A command-line utility for capturing Craft CMS Profiling output and reporting averages.
JavaScript
22
star
46

sprig-reap

Sprig-Reap is a gem that allows you to output your application's data state to seed files.
Ruby
18
star
47

Screenless

A $55 alternative user interface for rapidly prototyping ideas
C++
16
star
48

foliage

A light, cursor-like tree data structure
JavaScript
15
star
49

canvas-instagram-filters

Demo for an upcoming blog post
JavaScript
15
star
50

simple-benchmark

A simple gem to benchmark spots in your Ruby / Rails code
Ruby
14
star
51

Material-Design-for-Omnigraffle

Omnigraffle stencil modeled after the Material Design sticker sheets
14
star
52

gangway

A client-side API abstraction layer
JavaScript
13
star
53

pointless-feedback

Rails Engine to handle basic user feedback
Ruby
13
star
54

craft-classnames

Craft plugin for conditionally joining css class names together in Twig templates. Really helps with wrangling Tailwind CSS.
PHP
11
star
55

is-it-viget

A demo app for viget.com tutorial
Swift
11
star
56

beginning-react-native

The online home of the SXSW 2016 Beginning iOS Development With React Native Workshop
11
star
57

special-delivery

A webhook event manager for Mailgun
Ruby
10
star
58

d3-builder

Builds D3 as a browserify dependency
JavaScript
10
star
59

checkoning

Visualizating team PR interactions
JavaScript
10
star
60

react-dragon

A very simple drag and drop component. Did I mention it was simple?
JavaScript
10
star
61

diode

An extremely small, single event emitter
JavaScript
9
star
62

prestotype

(WIP) Simple UX prototype boilerplate
JavaScript
9
star
63

craft-site-starter

PHP
8
star
64

craft-viget-base

PHP
7
star
65

slack_alert

A simple button that lights up, plays jingles, and interacts with Slack.
Ruby
7
star
66

rails_polymorphic_select

This is a simple Rails extension that allows you to create polymorphic select inputs for relationships that are polymorphic. It takes advantage of Rails 4.2 Global ID
Ruby
7
star
67

chronolog

Change Tracking for ActiveAdmin
Ruby
7
star
68

sxsw

SXSW Connected Devices Workshop Materials
Arduino
6
star
69

grunt-git-hooks-demo

A sample application to get started using Git hooks with Grunt.
JavaScript
6
star
70

trailbuddy-view-transition

Astro
6
star
71

reword

A tiny translator.
JavaScript
6
star
72

active_versioning

Plug-and-Play Versioning for Rails
Ruby
6
star
73

craft-sidebartoggle

Add the ability to hide the meta sidebar on element entry screens
PHP
5
star
74

gradebook

Example application for the Rails Developer position
5
star
75

VL-Date-Selects

EE plugin to dynamically generated selects for months, days, and years.
PHP
5
star
76

gastropod

Simple library for generating slugs
Ruby
5
star
77

talking-heads

The creepy talking head app.
JavaScript
5
star
78

bode

The bode webserver, written in C
C
5
star
79

washi

A simple, backbone inspired view helper.
JavaScript
5
star
80

microcosm-preact

Microcosm bindings for Preact:
4
star
81

romanize

Roman numeral conversion programming exercise
Ruby
4
star
82

Search-Words

Ruby
4
star
83

inline-svg-sprite

Inlines external svgs sprites and updates `xlink:href` attributes in `<use>` tags to reference the inlined svg.
JavaScript
4
star
84

Style-and-Swatch-Palettes

4
star
85

microcosm-devtools

Developer tools for Microcosm
3
star
86

lights-out

New programming challenge based a game from the 80s
Ruby
3
star
87

VL_CP_Logger

ExpressionEngine extension that logs more actions to the control panel log.
PHP
3
star
88

dnsimple

Python module for interacting with DNSimple service
Python
3
star
89

Device-Asset-Templates

3
star
90

duke-colab-course

Arduino
3
star
91

json-feed-validator

HTML
3
star
92

responsive-page-text

Mixins for LESS and Sass to make all page text โ€”font sizes and line heightsโ€” responsive
CSS
3
star
93

webpack-intro

Intro to Webpacks in Steps
JavaScript
3
star
94

elixir-deploy-quickstart

Quickstart docs and files to get an Elixir app running on production
Elixir
3
star
95

lights-out-vr

A WebVR exploration of Lights Out.
JavaScript
3
star
96

snakey-table-ios

๐Ÿ“ฑ Custom UITableViewCells in iOS
Swift
3
star
97

microcosm-debugger

No longer in service. Use https://github.com/vigetlabs/microcosm-devtools
JavaScript
2
star
98

stimulus-controllers

Astro
2
star
99

gather-content-api

PHP Client for GatherContent API
PHP
2
star
100

wordpress-site-starter

JavaScript
2
star