Fancyapps

Google Maps ​

The Carousel Html plugin is used under the hood to recognize and display various Google Maps URLs.

Supported URLs ​

Examples of URLs that are automatically recognized:

https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572
https://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
https://www.google.com/maps/@37.7852006,-122.4146355,14.65z
https://www.google.com/maps/search/Empire+State+Building/
https://www.google.com/maps/search/?api=1&query=centurylink+field
https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393

Creating pins ​

If you want to display a map with a pin and location information at the specified location, create a link by following the Google Maps documentation or by performing these steps:

  1. Copy this template: https://www.google.com/maps/search/?api=1&query=QUERY&query_place_id=PLACE_ID
  2. Replace QUERY in the template with a URL-encoded search query.
    For example, the address "Westminster Bridge, London" should be converted to Westminster+Bridge%2C+London.
  3. Use Place ID Finder to find an ID for your place and replace PLACE_ID in the template with the result.
    For example, the address "Westminster Bridge, London" has the ID ChIJoaH8k8YEdkgRnmDd5iuUl9Y.
  4. The end result should be something like this:
    https://www.google.com/maps/search/?api=1&query=Westminster+Bridge%2C+London&query_place_id=ChIJoaH8k8YEdkgRnmDd5iuUl9Y

Basic usage ​

Declarative ​

Create your elements following the usage instructions. Example:

html
<a
  href="https://www.google.com/maps/search/?api=1&query=Westminster+Bridge%2C+London&query_place_id=ChIJoaH8k8YEdkgRnmDd5iuUl9Y"
  data-fancybox
>
  Show map
</a>

JS Bin Example

Control the size of the map using CSS or the data-width and data-height attributes. It is also possible to use a direct link to the embedded iframe page by adding the data-type="iframe" attribute:

html
<a
  href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d10500.902039411158!2d2.2913514905137315!3d48.85391001859112!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1slv!2slv!4v1622011463926!5m2!1slv!2slv"
  data-fancybox
  data-type="iframe"
  data-width="640"
  data-height="480"
>
  Show map
</a>

JS Bin Example

In this case, if you want to remove the border around the map, use this CSS snippet:

css
.fancybox__slide.has-iframe .f-html {
  padding: 0;
}

JS Bin Example

Programmatic ​

Example of displaying a map with custom dimensions:

js
Fancybox.show([
  {
    src: "https://www.google.com/maps/@51.5039653,-0.1246493,14.12z",
    width: 800,
    height: 600,
  },
]);

JS Bin Example