Embedding Google Maps using Schema.org Markup

This entry was published on November 25, 2015 and may be out of date.

Schema markup is a semantic vocabulary for HTML that tells search engines what your data means. Google and all other major search engines can sift through the microdata, present it more prominently in search results and augment it with rich snippets. Schema markup can tremendously boost SEO when applied correctly.

What if we could extract locations and corresponding coordinates from Schema markup and generate Google Maps dynamically with multiple markers? Some of the use-cases of this approach could be:

  1. Listing company branches
  2. Retail store list
  3. Landmark listing

and any other use case which requires a list of places and embedded Google Maps.

Markup

The Schema markup must follow the following structure:

Organisation (id="organisation-name")
  |-- url
  |-- name
  |-- logo
  |-- description
  |-- location -> LocalBusiness (itemref="organisation-name")
    |-- name
    |-- address -> PostalAddress
      |-- streetAddress
      |-- addressLocality
      |-- postalCode
      |-- addressRegion
      |-- addressCountry
      |-- description
    |-- openingHours
    |-- geo -> GeoCoordinates
      |-- latitude
      |-- longitude

Organisation

We start off with an Organization with itemscope and itemtype. The ID is important for identifying the scope later and establishing parent-child relationships.

<div id="organisation-name" itemprop="branchOf" itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://example.com/">
    <div itemprop="name"><strong>Example Co.</strong></div>
  </a>

  <img itemprop="logo" src="/images/example.png"/>
  <div itemprop="description">Example Co. makes awesome widgets.</div>
  <!-- See "Location" below -->
</div>

The organisation requires an url, name, logo, description and finally, the location. We have multiple locations and each will translate to markers on the map.

Location

For each location of the organization, we enlist a location with itemtype as LocalBusiness.

In turn, each location has the following properties:

  1. name
  2. address (with itemtype as PostalAddress)
  3. openingHours
  4. geo (with itemtype as GeoCoordinates)
<li itemprop="location" itemscope itemtype="http://schema.org/LocalBusiness" itemref="organisation-name">
  <span class="name" itemprop="name">American Museum of Natural History</span>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
     <!-- See "Postal Address" below -->
  </div>
  <time itemprop="openingHours" datetime="Tu, Wed, Thu">Tue, Wed &amp; Thu</time>

  <div class="location">
      <!-- See "GeoCoordinates" below -->
  </div>
</li>

Notice the itemref on the address. It creates a parent-child relationship with the Organisation.

Postal Address

Each address requires:

  1. streetAddress
  2. addressLocality
  3. postalCode
  4. addressRegion
  5. addressCountry
  6. description
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="streetAddress">Central Park West &amp; 79th St</span>
  <span itemprop="addressLocality">New York</span>
  <span itemprop="postalCode">10024</span>
  <span itemprop="addressRegion">NY</span>
  <span itemprop="addressCountry">USA</span>
  <span itemprop="description">From dinosaurs to outer space and everything in between, this huge museum showcases natural wonders.</span>
</div>

geocoordinates

As the code below demonstrates, the GeoCoordinates component requires latitude and longitude, which are critically important to include in the code. This is where the plugin gets its coordinates from.

<span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">
  <span property="latitude" content="40.781354"></span>
  <span property="longitude" content="-73.973997"></span>
</span>

Final HTML

See the Pen Embedding Google Maps using Schema.org Markup by Saddam Azad (@azadcreative) on CodePen.20544

The Schema markup used here as example is perfectly valid, as tested with Google Structured Data Testing Tool. You can play with the code in Codepen.

Javascript

Schema-GMapify was built for exactly the use-cases described above. GMapify is a jQuery plugin for extracting data from Schema markup (Organisation, Localbusiness, PostalAddress and GeoCoordinates) and generating a neat Google Map widget. Not only does the Schema markup enhance SEO, the styling of the markup makes it a good-looking UI component.

$('body').gmapify({
  canvas: "#map-canvas",
  datasource: "#organisation-name",
  dataitems: 'li',
  zoom: 14,
  scrollwheel: false
});

Try out the Documentation and Demo or view the source code in Github.