Shape editor allows you to create shapes and markers on Google Maps, customising them, and organising them before saving them on a Json file. These shapes are aimed to represent geographical and political divisions such as States, City Neighbourhoods, Districts, Regions, etc.
Clone or Download. Get your Google Maps API key here, and use it on the following lines of code by replacing "INSERT-YOUR-API-KEY-HERE" with your API key:
On index.php
<!--External JS-->
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=INSERT-YOUR-API-KEY-HERE&libraries=drawing"></script>
<script type="text/javascript" src="js/shape-editor.js"></script>On shape-editor.js
// Changes the location of the maps
function changeLocation() {
document.getElementById("lastSearch").value = base_location.value;
document.getElementById("map_embed").src = "https://www.google.com/maps/embed/v1/place?key=INSERT-YOUR-API-KEY-HERE&q=" + (base_location.value).replace(" ", "+");On shape-editor.js
// Map creation
function createMap(mapContainer) {
// Creates base map
document.getElementById("map_embed").src = "https://www.google.com/maps/embed/v1/place?key=INSERT-YOUR-API-KEY-HERE&q=" + base_location.value;There are two maps on the map section - A base map with an overlay map on top. The base map is able to show city boundaries upon a search, whereas the overlay map isn't. Combining the two maps this way, you are able to effectively copy those boundaries onto your custom shapes created on the overlay map.
A- Dropdown menu which allows you to show or hide the shapes you have created. This menu will be filled up as you create your shapes and markers.
B- This is where you can select the type of map your overlay map is.
C- This is where you can select the style applied to the overlay map.
D- This is where you can select an overlay for your overlay map.
E- This message box logs your actions on the editor.
A- As you create new shapes, new items and categories will be created on this dropdown, allowing you to filter in or out your shapes the way you prefer it.
A- Map types include "Roadmap" (the default map type), "Satellite", "Hybrid", and "Terrain".
A- Map styles are custom ways of displaying your maps by altering Options parameters such as primary roads fill and stroke colour for example.
A- Map overlays are displayed as an overlay of your map. Included are "Transit", "Traffic", and "Bike".
A- Your actions on Shape Editor are logged on the Message Box.
A- Maps location allows you to search for a new location on both maps simultaneously. Each map search results in a marker being displayed on the map, which can be removed by clicking the "Clear marker" button.
B & C- The Overlay map section allows you to control the opacity* of the overlay map, the colour of your shapes, and the thickness of their borders.
D- Delete the selected shape or marker, delete all shapes and markers, or save them all.
*Note: In order to be able to move around on the base map, the opacity of the overlay map should be set to zero by sliding the blue handle all the way to the left.
A- Main map section.
B- Shape controls.
C- Full screen option.
D- Street view mode.
E- Zoom controls.
F- Current scale.
A- Create shapes easily the way you like.
A- When clicking on a shape on the map, you can easily edit all its points, and all its names.
A- Creating markers is just as easy. A dropdown menu lets you choose from a list of different marker icons, which you can modify as you wish.
A- Fill in the marker properties in order to finish creating your marker.
Any custom icons you would like to use for your markers can be added to the folder "markers" located inside the folder "images". The code will detect them and insert them into the dropdown automatically.
- Add CSS media queries to allow responsiveness on smaller devices.
1.0