In this tutorial, we will overlay a custom SVG on Google Map.
You need to have 2 Google API keys to continue: How to get Google API keys
Download SVG with Google map button on the MapSVG start screen.
Enter the address of location where you want to add a vector overlay.
Select the address from the drop-down list.
Adjust the map position as needed. Click on
Download SVG button.
What happens next: MapSVG makes a screenshot of the Google Map part that is visible on the screen. Then MapSVG inserts the screenshot to an empty SVG file and adds the map geo-boundaries data to the file (left/top/right/bottom latitude/longitude coordinates) and downloads the file to your local disk. When you upload the file back to MapSVG - geo-data embedded in the file allows MapSVG to position all vector objects on the live Google Map.
Now you have 2 options:
Edit SVG filebutton in the map editor
You can't set IDs for individual SVG objects in AI, so Inkscape is recommended.
Open your SVG file in Inkscape:
If you edit the file in Inkscape or AI - don't change the map width/height and don't move the Google Map screenshot - it breaks the geo-calibration.
Before editing the SVG file, read the following page about requirements for custom SVG files: Using a custom SVG file
Click on the pen tool on the left and add a polygon. Change to color fill to semi-transparent or transparent to show the Google Map underneath:
Add one more polygon. Now right-click on a polygon, choose
Object properties and change the Object ID in the form on the right side and click
Don't remove the Google Map screenshot in Inkscape/AI before saving the SVG file.
Once you finish drawing, save the file as "Plain SVG", go to MapSVG start screen and click on
Upload SVG file button. Click
OK when asked if you want to remove the screenshot from the background.
When you see "File is uploaded" message, click on
New SVG map drop-down list, enter "user-uploads" in the search box to see all uploaded files, find the file "user-uploads/mapsvg.svg" and click on it to create a new map
You will see the polygons you've drawn an a grey background:
Go to Menu > Google maps and enable Google Maps:
Go to Menu > Settings and enable zoom & scroll. Try to move the map around. Go to Menu > Regions and you'll 2 rows with your objects there:
Upload SVG file
OKwhen asked if you want to remove the screenshot from the background
New SVG mapdrop-down list, enter "user-uploads" in the search to see all uploaded files, find the file "user-uploads/mapsvg.com" and click on it to create a new map
Edit SVG filebutton in the top toolbar
Save SVG fileand go back to the map settings