Replacing Google Maps with Open Street Map on Your Website
Google Maps Platform, one of the most popular ways to display a “live” digital map on a website, recently updated their usage limits and began imposing a required account registration for all users. This account registration also requires that you enter a payment method so that Google can begin charging you if your website gets “too much” traffic. Based on this, finding an alternative to Google Maps may be on the horizon.
How will this impact my website?
- If you have an existing Google Map on your site, you may have a bit of time before Google imposing their API limits. That being said most websites using Google Maps will now display the map with an overlay watermarked with “for development purposes only.” Your map may work, although it doesn’t look professional for you or your organization.
- If you want to add a new map to your website, you’ll almost assuredly find that you will need to register a new account with Google and provide them with payment information before adding that new map.
The billing requirement is now being enforced. All projects must be associated with a billing account.
Per Google’s updated information as of July, 2018
Options if you want to keep using Google Maps
- Create an account with Google Maps and provide them with your payment information. If your map usage exceeds the limits of their free plan, you will begin payments. For more information see the Google pages referenced here in this article.
- Use a different platform such as Open Street Maps as your alternative to Google Maps.
Sample Open Street Map
Valorous Circle, 2922 Fuller Ave. NE, Grand Rapids, MI 49505
DIY: Replace Your Google Map with an Open Street Map
Based on a website using WordPress & Divi
- Open your web browser (we recommend using Google Chrome or Firefox)
- Navigate to: https://www.openstreetmap.org
- Enter the address you want the map to display. If you have multiple maps, you will need to create a map for each Google map that you will be replacing.
- Navigate on the map to find your address – Open Street Map may not see your exact location
- Click on SHARE – located on the right side of the Open Street Map browser window
- Click on INCLUDE MARKER – located on the right side of the Open Street Map browser window
- Open Street Map will place a marker on the map. Drag the tag to your specific location/address. Feel free to Zoom in on the Open Street Map to find your organization’s exact location.
- Click on HTML in share menu – located on the right side of the Open Street Map browser window
- Copy the HTML code to your clipboard
- Navigate to your organization’s website
- Login to the ADMIN portion of your WordPress website
- From the Dashboard, select PAGES in the WordPress menu
- From the list of pages on your WordPress website, choose the page you want to edit by clicking on the page title or related EDIT link
- Use the Divi Builder (assuming you are using the Divi, page builder)
- Locate the existing Google Map module on your selected web page
- Delete the Google Map module on your webpage
- Click on INSERT MODULE(s) in the Divi Visual Editor
- Insert a CODE module in place of the deleted Google Map module
20. Edit the HTML code – replace the default “width” value with 100%
21. Edit the HTML code – We recommend replacing the default “height” value with 400
22. Click SAVE & EXIT
24. Click on VIEW POST near the top of the page to check to see if everything works and looks correct in your new map module
25. Repeat as necessary until you replace each of your Google Maps with Open Street Maps.