WordPress Plugin: Google Maps v3 Shortcode

This plugin allows you to add a google map into your post/page using shortcodes. The following examples shows all available parameters you can use in your shortcode. Note that these examples have spaces between the opening and closing square brackets that must be removed during actual implementation.

http://wordpress.org/extend/plugins/google-maps-v3-shortcode/

If you like this plug-in, please consider donating! It will help buy me some coffee to keep me awake :)

Features

  • Support for Google MyMaps
  • Info windows
  • multiple maps on the same post
  • set map size
  • set zoom level
  • set map type
  • set location by latitude/longitude
  • set location by address
  • add marker
  • add custom image as map icon
  • add KML via URL link
  • show traffic
  • NEW!show bike lanes
  • NEW!add a Fusion Table Layer
  • NEW!show infowindow by default

Default world map

[ map ]

Multiple maps on the same page

In order to add more than one map to the same page, you need to add an “id” parameter for the new map.  Since the default id for the first map is “map”, make sure you name it something else (ex: “map1”, “map2”).  All id’s on the same page must be unique.

[ map id="map2"]

Width/Height

Default width value = 400, default height value = 300 (in pixels)

[ map id="map3" w="200" h="100" ]

Zoom level

Default value = 1

[ map id="map4" z="5" ]

Map Type

Default value = ROADMAP Accepted values = ROADMAP | SATELLITE | HYBRID | TERRAIN

[ map id="map5" z="5" maptype="TERRAIN" ]

Latitude/Longitude

Default value = 0,0

[ map id="map6" z="5" lat="34" lon="-118" ]

Address

If you provide an address, it will override any lat/lon parameters.

[ map id="map7" z="5" address="Tokyo, Japan" ]

Marker

[ map id="map8" z="5" address="Tokyo, Japan" marker="yes"]

Marker Image

You can add your own custom image to override the default google map icon.  Make sure to keep your image small.  Also, I would recommend you use a .gif or .png format with transparency.  If you use your own image, make sure to also add the marker=”yes” parameter.

[ map id="map9" z="5" address="Tokyo, Japan" marker="yes" markerimage="http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png"]

Info Window

If you have set marker=yes then you can also choose to provide an info window bubble.  Simple HTML tags are also supported.

NOTE: Info window stying is very finicky in terms of the syntax. Try using < span > tags instead of < div > tags, and try to avoid double and single quotes.

[ map id="map10" z="15" address="New York" marker="yes" infowindow="Hello World
New York is the most populous city in the United States, and the center of the New York metropolitan area, which is one of the most populous metropolitan areas in the world."
]

KML

Adding a KML URL will override any address or lat/lon parameters. It will also auto-center and zoom to the extent of the KML, therefore, overriding any zoom level settings.

[ map id="map11" z="5" kml="http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml" ]

Traffic

[ map id="map12" z="5" address="Los Angeles, USA" traffic="yes" ]