MapSVG tutorial

How to add Google Maps to WordPress

With MapSVG you can: create a Google map, Google map with SVG (country) map overlay, or Google map + custom SVG artwork. SVG is perfectly positioned on Google map by lat/lng coordinates.

Since summer 2018 Google also asks everyone to provide billing details in order to use their API. There is a free quota 28,000 Google Map views per months. You won't be charged if you don't exceed the limit.

What you need to do first is get a Google API key.

  • Create one API key and enable "Maps Javascript API" for it. Restrict this key by your domain http://yoursite.com/* or if your website is under secure HTTPS connection, then https://yoursite.com/*
  • Create one more API key and enable "Geocoding API" for it. Restrict this key by your site's IP address (like 111.222.333.444). Get your website IP here
  • Add both keys on MapSVG start screen by clicking on Google API button

Now you can click on New Google Map button.

If Google API key is correct then you should see Google Map.

Go to MapSVG > Google map section.

First thing you may want to do with Google Map is zoom to a specific location. That's easy to do: just enter any address into Go to location field and choose the address from auto-suggestion list.

Also you can change a type of the map: Roadmap / Terrain / Satellite / Hybrid. Screenshot on the left shows Hybrid type.

That's all about basic Google Maps settings.

Now you can add Database objects, add Markers and Directory - all the functionality of previous versions of MapSVG remains the same and works fine with Google Maps too!

Next tutorial: Google map + SVG (country) map overlay