Adding State Borders to Google Maps API – Web Design Project

Something not native to the Google Maps API is adding boundaries to state borders. Here’s a tutorial on adding a polygon layer to the outline of a state.

I’ll be using some simple resources to convert some XML code into a JavaScript Array,

Use http://econym.org.uk/gmap/states.xml for getting the proper GPS coordinates.

Displaying these boundaries can help distinguish state borders when multiple markers are added to map; for instance, adding multiple locations or project sites to a digital map.

StateBorderTXThe XML data from the link above can be easily converted into a JavaScript array, all using the search/replace function of a text editor. Simply configure the text into a JavaScript array in a few search/replace steps, such as changing ‘ ” lng=” ‘ to ‘ , lng:  ‘

SearchReplaceLatLng

After the state border data in formatted correctly, we can insert the properly named array into the JavaScript of the map. Immediately after the array we can insert another variable as the %State%Shape name and include the array %State%Coords as the path.

Then, %State%Shape.setMap(map); is called and the map should display when the page is loaded. Sometimes I use a hard refresh, CTRL + SHIFT + R, to reload the page to fetch the newly saved file.

BorderCodeColorado

Here what the map can look like when selecting a few states to outline, the border outline can be bolded/changed to a different color. Also, markers can be added on the map as well in each state or surrounding area.

StateBorderUSA

Best part is this map template is customizable with different colors, marker images, graphics, and interactivity. For more information on web design and past projects, check out my About Page

Here’s the interactive map below:

Have a project idea or a question? Contact me at:
@mindbodymetrics, I enjoy web design & digital health as a student of neuroscience

Email me at will [at] mindbodymetrics.com

Leave a Reply

Your email address will not be published.