BangkokTemple

Start Making Better Google Maps Embeds

Here’s a neat map template used for displaying information about a single place. This map is meant to extend a simple Google Maps Embed by adding a custom sidebar with a Google Chart.

The idea for this Maps API template is to be used on a local businesses ‘Contact’ or ‘About Us’ page.

Some ‘About Us’ pages on website could benefit from such a map styling! A detail-rich map with a custom icon marker and data visuals could make for a more enjoyable user experience. Local businesses and personal pages could use this template to convey a specific message to a targeted audience.

I tried something new with this map, at first I wasn’t sure if I’d be able to put a Google Charts embed into the HTML sidebar of the Google Map; but I got it to work then adjusted the parameters of the sidebar to make the window a little more responsive to relative screen sizes. It might be difficult reading the text on a smaller screen, however I suppose that is a compromise with this specific template!

The Google Charts extensive library includes GeoCharts, pie charts, scatterplots & other data visuals. For a more in depth look at use of the Charts Library, take a look here.

Thailand has thousands of religious temples, making for a great tourist spot! Some trip planning and local business review websites could benefit from maps with a more individualized emphasis. Places like tourism hotspots are a dense market, there seems to be a large market & broad appeal for custom maps.

I created another custom map embed using Google Charts & Maps Javascript API, below is another version of my custom map template from above:

Using the Google Maps Embed API and API key, you can easily see the distance between these two Thai temples:

So in summary here a simple Google Maps Embed:

Then compare it to the enhanced map above, you can see that the features on the first map include a more thorough description and a hovering circle around the marker.

The first map is using the Google Maps JavaScript API whereas the simple embed is using a Google Maps iframe retrieved from google.com/maps. I prefer the customization of the Google Maps API, however I have yet to decipher how to get the reviews (5 star rating system) to show up using the Maps API. If an automatically updated reviews feature were to be displayed on the first map, then it would be much more beneficial for local businesses to help build a reputation. Of course linking to the Google Plus page is an option, but having an automatically updated review rating displayed is preferable.

Overall, this digital mapping template has loads of customizable options! It’s easily extendable to include whichever relevant Google Charts projects you’d like the create, which makes it a very versatile template.

Start making detail-rich Google Map embeds!

If you have any questions about this mapping scheme, email will[at]mindbodymetrics.com

Leave a Reply

Your email address will not be published.