EverWeb Codebox

Custom Google Map

Create More Stylish Maps

Google maps are a very convenient way to guide potential customers to your business location and they can be installed easily using the EverWeb widget.

For a better looking and more accurate map read on...

Go to Google Maps, enter the address and then click the Link tab to get the popup shown to the right.

Highlight the HTML and copy it to your clipboard - Command C

Open a new doc in Text Edit.app and paste - Command V

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=s&ie=UTF8&ll=37.0625,-95.677068&spn=70.315091,67.324219&t=m&z=4&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=s&ie=UTF8&ll=37.0625,-95.677068&spn=70.315091,67.324219&t=m&z=4&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Delete all the code marked in green above and add the code marked in blue shown below between <iframe and src

Style the map by entering width and height. Set the border width, type and color. Add padding and a background color along with a border radius if required.

"z=12" is the initial zoom level - enter a different number if required

"sll=37.0625,-95.677068&" is the latitude & longitude for the center point (marker) of the search which you can change for more precision.

To find latitude and longitude...

Go back to the Google Maps page.

Control (right) click the red marker and select "What's Here?" from the popup.

Now click the green arrow and a popup will appear with latitude and longitude.

Copy the code and paste it into an HTML Snippet in EverWeb. Click "Apply" and adjust the snippet to fit the map.

Code Changes

<iframe style="width:800px;height:500px;border:3px solid #000;margin:0;padding:20px;background: #FAFAFA;border-radius:15px" src="https://www.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Helensburgh+UK&aq=&sll=37.0625,-95.677068&sspn=70.315091,67.324219&ie=UTF8&hq=&hnear=Helensburgh,+Argyll+and+Bute,+United+Kingdom&t=m&z=12&ll=56.002318,-4.734014&output=embed"></iframe>