jQuery To Parse Address/Vcard Text Into Google Maps

Address vCards to Google Maps with Jquery to parse vcard/address text in Google Map. No long search. There are no unique js files for each map instance.

The dependencies project uses scss + Bourbon – out of a workflow habit rather than a requirement.

how to use google map in jquery, jquery map plugin, store locator google maps jquery, google maps api examples, jquery map marker plugin, responsive google map location picker

How to make use of it:

1. Download and upload the jQuery vCard plugin after the 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 into your document.

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

3. vCard markup/encoding.

<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. CSS Styles Required.

.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

transform vcard addresses into google maps api, vcard-to-gmaps Plugin/Github