Google Map & Directions Setup
Editing the map locations on the contact page
Support for Allwebco templates that include a Google map window and/or a link to Google maps and/or a get directions form on the contact page. See your template help.html for the correct support links.
See Instead…
See Instead…
Before you start
Google has made some changes to the embedded webpage map code and now requires an API key in the code. You may need to make changes to your web template contact page Google map code in the <head> section. See the following two support pages at Google:
Adding your API key
Once you have created your Goole API key, you will add a new script line to the existing map code in your contact page <head> section. Click visual below.
Editing the location text link
Search for your address at Google or Mapquest. Copy the link in the browser address bar. In the "contact.htm" find the link "View Location Map at Google" or "Click for location map" and replace the code as highlighted below with your link.
<a href="https://www.google.com/maps?q=chicago+il&as_occt=any&
gws_rd=ssl&um=1&ie=UTF-8&sa=X&ei=YOLnVMWkFoK2yASt74KoDg&
ved=0CAgQ_AUoAQ">View Location Map at Google</a><br>
Editing the Google map window location
You'll need to find the latitude and longitude coordinates for your address.
- Search for your address at Google.
- In the results, right click the location link and select "What's here?". The latitude and longitude coordinates will appear on the page. See Google help for the most current info.
- Select and copy the coordinates.
- In the <head> section of the "contact.htm" on about line #26 locate the following line and paste your coordinates over the other coordinates as highlighted below.
var myLatlng = new google.maps.LatLng(41.8369, -87.6847);
- Test the "contact.htm".
Zooming the map
In the "contact.html" source code, near the top of the page, edit the "zoom: 10," to something like 12 or 14 to zoom in more on the map. Use a lower number to zoom out.
Map size
Edit the following in your template .css file to adjust the height and width of the map window. If the map is in the sidebar you should not widen the map.
#map-canvas { width: 235px; height: 160px; }
Editing the "Get Directions" address
In the "contact.htm" find the note "GOOGLE GET DIRECTIONS FORM". Edit the address with your address as highlighted below. In some cases you can include your business name, with a comma at the end, as in this example.
<input type="hidden" name="daddr" value="Business Name, 123 Street Chicago, IL 60622">