Adding Google Maps to your Store

With a lot of businesses being more local now days, companies really want to show where they're located in an area, or make it more convenient to find. Google Maps really assists with this. 

What is Google Maps?

Google Maps puts an interactive map on your site. This allows customers to see where you're located and you can also provide delivery areas with in these maps with a bit more detail and few lines of code. It offers satellite imagery, street maps, 360° panoramic views of streets (Street View), real-time traffic conditions (Google Traffic), and route planning for traveling by foot, car, bicycle (in beta), or public transportation.

How to Install Google Maps

For this example we'll be installing Google Maps in a text page. You can also do this on the front end of your site, but will need to use Cart Designer and then the WYSIWYG editor. 

Let's start by creating a Text Page on your site.

Navigate to Admin of the Cart. Click Content > Pages > Add Page.

We're naming our page 'Locations'.

1. Type Locations in the title.
2. In the Content area, you can type out any type of messaging you'd like. For example, you might type out the address here.
3. After typing out a message, go ahead and click Save so we can see what it looks like.
4. Click View on Storefront.

1. Return back to the Locations page in the admin area. Click the Source Code button as show below.

2. Highlight and copy the following code:

<script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
            center: {lat: 44.540, lng: -78.546},
            zoom: 8
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

3. Paste this code into the Source Code box, under the existing text. This will look like the image below:

4. The next thing here would be to update the Coordinates within the code to match the location of your business. To easily get the two Coordinates you will need (Latitude, and Longitude), use GPS Coordinates. Just make sure to allow location.

5. Return back to the code on the text page, and replace both the latitude and longitude with the numbers given to you by that website.

Now you will need an API key from Google to insert into the code.

Follow these steps to get an API key:

1. Go to the Google API Console.
2. Select Create a project and click Continue.
   
   
   
3. On the Credentials page, name your Browser API Key and enter your domain name (preceded by an * and ending with a /*).
   
   
   
4. This will generate the API Key that you need for the code. Highlight and copy it.
   
   
   
5. Return to the code and replace YOUR_API_KEY with the key you just copied.
   
   
   
6. Click Ok.
7. Click Save.

You will likely want to zoom in on your map a bit more than the default, which is 8. Go to the zoom: 8 section, and replace it with a higher number to zoom in more. I found 19 to be a good number, but you can adjust that later if you'd like.

Now we need to add CSS to make the map visible.

1. Highlight and copy this code.

#map {
        width: 100%;
        height: 400px;
     }

2. Go to Design > Cart Designer. Choose Advanced Tools > Edit custom css.

3. Paste the code at the bottom of this section, and click Save and refresh the page.

Now go back to the page on the front of the site to see what it looks like. Remember, you can adjust the CSS and zoom as you see fit.

Links to Related Articles.

None at this time.

If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support