WebSharper Extensions for Google Maps Public
Google Maps offers street maps, a route planner for traveling by foot, car, bike, or with public transportation and a locator for urban businesses in numerous countries around the world.Library home Browse source code Example
The Google Map API, version 3.13, enables you to create rich, interactive maps, street views, route planning, and much more. Go and check out their homepage.
With this WebSharper Extension you can develop WebSharper applications that use the Google Maps API using nothing but F# code.
The source code for the extension is available on both Bitbucket (Mercurial) or GitHub (Git):
The Google maps API is a free service that is available to every page that is free for its users. You can check the specific terms of service here.
The version 3.0 of the Google Maps API does not require a key. The extension will generate code similar to the following for your pages:
This extension provides a set of classes almost identical to the ones documented in the Google Maps API v3. When used in WebSharper projects, these stub classes delegate the work to the actual classes implemented in Google Maps API.
A Simple Map
Creating a map typically involves 3 steps:
Create a container, an
Htmlelement that will hold the map object.
Initialize the map and attaching it to the container.
Set properties, wire events, add overlays or controls to the attached map.
The first two steps are independent of the functionality. For this you can create a simple helper function that receives a function that takes as a parameter the initialized map:
1 2 3 4 5 6 7 8 9 10
<div> element is created at line 3. The size of the
determine the size of the map. You can set all the style properties
you want in this step, including padding or margins.
It is necessary to initialize the map using the
(line 4). The Maps API requires that the element is already attached
to the DOM before initializing the map. Doing the Map initialization
after the widget rendering makes sure that this condition holds.