Press "Enter" to skip to content

jQuery To Parse Address/Vcard Text Into Google Maps | vcard-to-gmaps

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="//"></script>
<script src="js/vcard-gmaps.js"></script>

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

<script src="//"></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>

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

See Demo And Download

Official Website(stephenscaff): Click Here

This superior jQuery/javascript plugin is developed by stephenscaff. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.