Google Maps
Powerful Maps Made Easy
The Google Maps stack is the best way to add a responsive map to your website. It supports every possible feature Google provides in their Static Map and Embed Map APIs. There are 5 different map stacks to choose from. These stacks integrate with some more powerful stacks to bring you even more capabilities, including CMS customization.
Upgrade Eligible
Key Features
Map Embed
Easily add the standard interactive Google Map embeds.
Search Map
Display search results from any query onto an interactive map.
Directions Map
Display directions with up to 20 different waypoints along the way.
Streetview
Display street view of anywhere around the world.
GPS Loader
Dynamically load a website visitor's GPS coordinates directly into a map (even a directions map).
Delay Loading
Integrations with Raincheck and Cookie Jar can improve page performance and help with GDPR/DVSGO compliance.
Static Maps
Google Static Maps provide retina images of your maps. These use any 3rd party scripts. Great for privacy!
Static - Custom Styles
You can style the static maps in a thousand different ways. Define custom colors for every little details.
Static - Markers
Add as many location markers are you want. You can also connect them together to form a region that can be colored.
Total CMS + Feeds
Every map stack works great with Total CMS and Feeds to populate the map data.
Pi + GPS Distance
JS functions at included with all map stacks that can allow you to us Pi to calculate the distance between 2 GPS points.
Google API Key required
You will need a Google API key in order to use the maps. The Static Maps do cost money per use.
{{{ icon }}}
{{ title }}
{{{ summary }}}
Demo
Static Maps
The Static Map stack implements all aspects of the Google Static Maps API. I could probably have 20 different maps here and still wouldn't come close the showing you everthing that it can do. The custom maps styling has been a big addition to v3 of this stack. You have full control over the map markers that you add to the maps as well. You can even use your own custom images. This could be a great way to add your company logo onto your maps.
The Static Maps API does have fees associated with it's use. See Google's billing and usage page for more info.
Embeded Maps
This is the default interactive Google Maps that you see all over the web. You can simply have a map of a perticular area or you can add a marker to a single location. As with all of the embeded maps below, you can customize the zoom, terrain, sizing and more. The maps are fully responsive.
Streetview
Embed an interactive Streetview of your location. I would love to know the story behind this streetview! 🤣
Search
The Search Map allows you to search for locations within your maps. This maps searches for Whole Foods markets within San Francisco. This maps is also shows an example of a satelite map.
GPS Load
The GPS load stack is pretty cool. It allows you to prompt the user for their actual GPS location and then you can integrate that data into a form and all of the maps stacks. Click on the button below and your current location will be loaded into a map. The ability to load the GPS data into form fields is optional. You can also trigger this behavior automatically on page load instead of requiring the user click on a button.
Map Swap
Map Swap allows you to have a centralized map view area. You can then simply click on a button to load a different map into the map viewer. Click on the buttons below to swap the maps that are being displayed. Also note that by default, you do not need to display a map. You can display any stack content. The content will be replaced once a button is clicked to load in a map.
Screenshots
Tutorials
Downloads
Google Maps Demo Project
Uploaded by Weaver's Space
{{ title }}
Uploaded by {{{ from }}}
Updates
v3.0.1
- New online Help links when access from inside Stacks Library.
- Improved messages when stacks are missing from library in a project.
v3.2.0
- Removed all dependency on jQuery. All JS was rewritten in vanilla JS.
v3.1.1
- Fix for Load GPS on page load
v3.1.0
- New Map Swap stack allows you to create a centralized Map view where maps can be swapped into the view by simply clicking a button or link.
- The Google Maps demo file has been updated with an example of how to use Map Swap.
- Map swap is not yet supported with Static Maps. All other maps are supported though. I will try to add Static Map support in the future.
v2.6.2
- Check out the new Google Maps 3 stacks. You are eligible for a discounted upgrade. Check out Google Maps 3.
v{{ version }}
© 2025 Weavers Space | Terms of Service | Privacy Policy
"This is the best Google Maps stack that I know of. Was immediately impressed there’s a lot of options apart from the standard map embed like Streetview, Search Maps, Directions and more. I’ve used a lot of these maps solutions over the years and if you need Google Maps then this is the one to get. Bear in mind you will need a Google API Key for it to work."