What is GMapify

What is Schema markup?

Schema markup is a semantic vocabulary for HTML that provides extra information for search engines. Schema tell search engines what your data means, which changes the way search results are displayed with rich snippets and meta information extracted from your pages.

Organisation/Localbusiness Schema markup tells the search engines information about your business, its location, branches, stores, etc.

What does Schema-GMapify do?

This plygin extracts information from Schema markup in your page and generates a Google Map widget with multiple markers, titles, descriptions.

Markup

The Schema markup follows 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

See some sample code in Codepen.

Read the detailed breakdown in the article Embedding Google Maps using Schema.org Markup.

JavaScript

After DOM has loaded:

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

Options are as follows:

Name Purpose and expected input Default
canvas The ID where Google Maps would render -
datasource Information source for the map -
dataitems Is it ordered/unordered list item or description list or paragraph? li
zoom Default zoom level of the map 14
scrollwheel Boolean. Whether map would allow the scrollwheel false