jQuery Plugin To Transform vCard Addresses Into Google Maps - vCard To Gmaps

vCard To Gmaps is a jQuery plugin that make it possible to generate multiple Google maps from vCard addresses.

Basic usage:

1. Download and load the jQuery vCard plugin after jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/vcard-gmaps.js"></script>

2. Load the Google Maps JavaScript API in your document.

<script src="//maps.google.com/maps/api/js?sensor=false"></script>

3. The vCard markup.

<article class="js-map">
 <div class="vcard-gmap">
  <span class="location">Urban Influence</span>
  <span class="address">1508 10th Ave</span>
  <span class="city">Seattle</span>
  <span class="state">WA</span>
  <span class="zip">98122</span>
  <span class="country">USA</span>
  <span class="phone">310-543-0375</span>
  <span class="zoom">11</span>
 </div>
</article>

4. The required CSS styles.

.js-map {
  height: 100%;
  min-height: 35em;
  margin: 0;
  padding: 0;
}

@media (max-width: 58em) {

.js-map::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: transparent;
}
}

.js-map .gm-style-iw > div {
  font-size: 1.2em;
  overflow: hidden;
  height: auto;
  line-height: 1.6;
}

.js-map .gmnoscreen,
 .js-map .gm-style-cc { display: none !important; }

5. Plugin options.

//Set zoom within vcard
'zoom': parseInt($vcardGmap.children('.zoom').text()),
'mapTypeId': google.maps.MapTypeId.ROADMAP,
'mapTypeControl': false,
'scrollwheel': false,
'disableDefaultUI': false,
'styles': styles

---

This awesome jQuery plugin is developed by stephenscaff. For more Advanced Usages, please check the demo page or visit the official website.