Docs - Google Maps

Connect jQuery gmap plugin 3dParty/jquery.gmap.min.js to use google maps. And google map script http://maps.google.com/maps/api/js?sensor=false. Google map could be added into any block that has height and width (liquid or fixed). You can't need to use PI theme google maps css file. Add .pi-google-map class to block where you want to show Google Maps, then specify address and map type using data attributes data-map-type and data-map-address.

You can specify latitude and longitude instead of address using data-map-coords attribute separated by ";", example - data-map-coords="40.70502;-74.006344".

You can also specify map zoom and map style using data attribute data-map-zoom and data-map-style.

You can add your own marker by setting another attributes data-map-marker="imgPath.png", then you have to add another attribute with img dimensions data-map-marker-size="60,60" and one for anchor point coordinates data-map-marker-anchor="30,60".

Google Maps zoom on mouseWheel scroll is switched off by default, you can enable this by setting another attribute data-map-scroll-wheel="1".

Multiple Addresses

You can specify additional addresses using both data-map-address and data-map-coords just add a number to attribute name like data-map-address2, data-map-address3, data-map-coords2 and so on...

Marker tooltips

You can specify data-marker-title="title 1", data-marker-title2="title 2" to add marker tooltips

Google Map Types

• roadmap
• satellite
• hybrid
• terrain

Google Map Styles

• base
• light
• dark

Full width google map block

<div class="pi-section-w pi-section-black">
  <div class="pi-google-map pi-google-map-wide googleMap" data-map-type="roadmap" data-map-address="110 Wall Street NY 10005">
  </div>
</div>

Roadmap

<div class="pi-google-map" data-map-type="roadmap" data-map-address="14 Wall Street New York, NY 10005"></div>

Satellite

<div class="pi-google-map" data-map-type="satellite" data-map-address="14 Wall Street New York, NY 10005"></div>

Hybrid

<div class="pi-google-map" data-map-type="hybrid" data-map-address="9 South William Street New York, NY 10004"></div>

Terrain

<div class="pi-google-map" data-map-type="terrain" data-map-address="55 Wall Street New York, NY 10005"></div>

Zoom

<div class="pi-google-map" data-map-type="terrain" data-map-zoom="1" data-map-address="55 Wall Street New York, NY 10005"></div>

Custom Style

<div class="pi-google-map" data-map-type="terrain" data-map-style="base" data-map-address="55 Wall Street New York, NY 10005"></div>

Custom Marker

<div class="pi-google-map"
   data-map-type="terrain"
   data-map-style="base"
   data-map-marker="img/marker-base.png"
   data-map-marker-size="67,81"
   data-map-marker-anchor="30,81"
   data-map-address="55 Wall Street New York, NY 10005"></div>