Skip to content

JeanMarcGoepfert/pretty-maps

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

#prettymaps.js

Prettymaps is a lightweight jQuery plugin that allows you to easily set up a basic styled map with jQuery.

##Example

  $('#foo').prettyMaps({
      address: 'Melbourne, Australia',
      image: 'map-icon.png',
      hue: '#FF0000',
      saturation: -20
  });

gives you a map that looks like this.

The following options have been set as defaults. Check google for a full list of options.

  zoom: 13,
  panControl: false,
  zoomControl: false,
  mapTypeControl: false,
  scaleControl: false,
  streetViewControl: false,
  overviewMapControl: false,
  scrollwheel: true

##Multiple Addresses

If you require multiple addresses, pass an array into the address option field:

  $('#foo').prettyMaps({
      address: ['Melbourne, Australia', 'Richmond Australia'],
  });

Don't forget to zoom the map out enough to view both markers with the zoom option.

##Requirements

jQuery Google Maps API Library.

####Including Google Maps API Library:

Load this link in a script tag on your page

http://maps.google.com/maps/api/js?sensor=false

When using the google maps api in production, you'll need to get an API key.

Follow the 4 steps (should take about 2 minutes) here to get your api key, and include it in the script parameters like so:

  <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">

That's pretty much it, clone the repo and check examples.html for some live examples

About

Make awesome google maps with jquery

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published