Replacing Google Maps with Open Street Map on Your Website

Updated – Replace your Google Maps with an Embedded Google Map and avoid the API hassles!

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

  1. 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.
  2. Use a different platform such as Open Street Maps as your alternative to Google Maps.

If you’d like to create an account with Google and give them your billing information, click on the light blue button on this page labeled “Google Maps Platform Transition Tool.” If you want to avoid finding unexpected Google charges on your credit card, we recommend replacing the Google maps on your website with a map from Open Street Maps.

 

Sample Open Street Map

Valorous Circle, 2922 Fuller Ave. NE, Grand Rapids, MI 49505


View Larger Map

DIY: Replace Your Google Map with an Open Street Map

Based on a website using WordPress & Divi

 

  1. Open your web browser (we recommend using Google Chrome or Firefox)
  2. Navigate to: https://www.openstreetmap.org
  3. 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.
  4. Navigate on the map to find your address – Open Street Map may not see your exact location
  5. Click on SHARE – located on the right side of the Open Street Map browser window
  6. Click on INCLUDE MARKER – located on the right side of the Open Street Map browser window
  7. 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.
  8. Click on HTML in share menu – located on the right side of the Open Street Map browser window
  9. Copy the HTML code to your clipboard
  10. Navigate to your organization’s website
  11. Login to the ADMIN portion of your WordPress website
  12. From the Dashboard, select PAGES in the WordPress menu
  13. 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
  14. Use the Divi Builder (assuming you are using the Divi, page builder)
  15. Locate the existing Google Map module on your selected web page
  16. Delete the Google Map module on your webpage
  17. Click on INSERT MODULE(s) in the Divi Visual Editor
  18. Insert a CODE module in place of the deleted Google Map module
  19. Paste the HTML code copied from Open Street Maps into the CODE module you just inserted
  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
  23. Click UPDATE in the right column of the WordPress ADMIN page
  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.

Website Help

Our team of WordPress experts can help with your website needs!

Membership

Empower yourself with continuous learning through our Valorous Marketing Academy.

Get More Leads

We specialize in helping make you the sales/marketing hero within your organization.