MapSVG tutorial

How to add Google Maps to WordPress

MapSVG 4.0 introduces a new feature: Google Maps! Now you can create a plain 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.

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

Enable the following APIs:

  • Maps API
  • Places API
  • Geocoding API

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 wont' be charged if you don't reach the limit.

When you have a key, click on Google API button on MapSVG start screen, paste the code into text field and click "Save". Then 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