Web development & Optimization

If you want to insert location map on your website there is many options. Very popular option is Google map inside iframe, but I don't like a bunch of loaded elements inside iframe and because iframes produce slower page loading.

However instead iframe, thanks to great Google map services, there is also option to insert static maps images. Combine static with dynamic map is what this plugin do.

About plugin


  • shows static map image to get faster page loading
  • click on image open dynamic map inside popup window
  • popup window is responsive (thank's to Dmitry Semenov, Magnific Popup script)
  • option to shows multiple different maps in an article

What is unique

Map is pre-rendered in local file on Ajax call, where are done some reduction, and after that, on callback open popup with main part from that file.

Main target for this and next releases

To get much as possible fast response from Google map services and to get minor influence on website page speed.

Installation and activation

After install go to Plugin manager, select type "content" and enable Content - Google map plugin.
If you open plugin settings you will see initial setup.

Plugin usage

You can use this plugin to show only one location and in that case you can set all map values inside global settings options, but also you can override all global settings inside article. There is no any limit to display multiple and different Google maps on the same page.

To display map inside an article you only need to write "gmap" inside brackets "{}".
This {gmap} will show map from global plugin settings.

Override global parameters

If you need to show different maps on your website, or different maps inside an article, in that case you need to write map params inside article.

Parameters are: street, city, country, lat (latitude), lng (longitude), type (roadmap, satellite, hybrid, terrain), size (static map image size), zoom.

 Important notes for override:
Do not use any quotes when entering parameters (wrong: street="***", correct: street=***).
Do not use spaces if your street, city or country contain more words - use "+" (example below).

{gmap street=278+Bleecker+Street city=New+York country=USA size=640x280}


{gmap lat=44.108238 lng=15.237173 size=320x240 type=hybrid}
{gmap city=Marseille country=France size=320x240}

  • Location
  • Location

Address or Latitude and Longitude

To show map you can insert address without latitude and longitude parameters, and that's ok, but if you go directly to Google map service you will find that if you insert some address, location marker will be in the middle of that street address (arithmetic mean). However, if you enter latitude and longitude you will get marker on the right position.

Example, one of the best pizza restaurants in New York is on address "278 Bleecker Street" and that's shows the first image below. On the second image is same restaurant but with entered latitude and longitude.

{gmap street=278+Bleecker+Street city=New+York country=USA size=320x200 zoom=18}
{gmap lat=40.731701 lng=-74.003495 size=320x200 zoom=18}

  • Location
  • Location

How to get latitude and longitude?

Inside plugin settings, tab Advanced, you can switch on "Settings mode". In that mode you will get "right click" option inside popup window. In this way you can read latitude and longitude for the current cursor position. After it copy/paste that values and switch off "Settings mode". You can see how it's works on this demo page (open some map and do right click inside popup).


  • File Name: gmap.zip
  • Date Created: 2014
  • Version: 1.0
  • Size: 25KB
  • Download