We are pleased to announce that the new Surfing Waves Surf Map Widget is now available. You can now embed your local surf spot map on your own web page. It's quick, easy, and straight forward to use - and it's free!
The widget is linked to our surf spot atlas, and reflects all the surf spots that are currently on the map. Any future surf spot that is added will appear on your map. There is also a handy link to add more of your own spots, helping us to improve the quality and content of our atlas. You can also embed as many different surf maps as you like. The embed code is a short piece of JavaScript that can be copied and pasted into your page HTML.
Here's a quick guide explaining how to add the surf spot to your page.
Find the map you would like on your web page:
Navigate our surf atlas until you find your local region. You'll find an "embed button" underneath the main surf map display area. If there is no "embed button", continue to navigate through the surf spot regions until it shows. (It will only show on pages where it is possible to add surf spots to the map.) For this example we are using the San Diego County Surf Map.
Select the dimensions and generate the code:
The next step is to click the "embed button" and then enter your desired dimensions. There's a minimum width of 150 for the map, but for better detail, a larger map is preferable. On a small scale, the buttons and logo on the map will obscure the surf spots. Choose the width and height that best suits your web page. (You'll have to read and accept the standard terms and conditions before generating the embed code.) Once you are done, click the generate button to get the maps' embed code.
Copy the JavaScript and paste into your web page:
The final stage is to copy the JavaScript code that has been generated for your web page. Clicking in the code box will select all the Javascript, then just copy the code and paste it straight into your web page HTML. The code must not be altered in any way, and in pasting all the code, your map will continue to reflect the map as you would see on Surfing-Waves.com
Once the map has been embedded on your web site, it will display to everyone who sees your web page. Using the widget, you can add spots to the map, improving both your map and the original on Surfing Waves. Here's how the map looks when it has been embedded:
Let us know how you get on, we be happy to receive any feedback or suggestions on how to improve the widget.
Source: Surfing Waves