Back to Questions
3.5k
views2
comments
Google Maps Coords?
websharperf#mapscoordsgoogle

Greetings! When using the Google Maps extension in my WebSharper application, I need to draw the map centered at the coordinates returned from HTML5 Geolocation. Reusing one of the standard mapping examples, I want to use coords.Latitude and the coords.Longitude in line 44 below, but I don't know how to. Any idea how?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

namespace MyApp

open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.Html5

module Geolocation =

    [<JavaScript>]
    let GetPosition() : (Async<Html5.Position>) =
        Async.FromContinuations(fun (onOk, _, _) ->
            Html5.Window.Self.Navigator.Geolocation.GetCurrentPosition(fun pos ->
                onOk pos
            )
        )

    [<JavaScript>]
    let rec Main () = 
        Div []
        |>! OnAfterRender (fun elem ->
            async {
                let! position = GetPosition()
                let coords = position.Coords
                let coordsText = (coords.Latitude, coords.Longitude).ToString()
                elem.Html <- elem.Html + "<h2>Your location is: (" + coordsText + ")</h2>"
                
            }
            |> Async.Start |> ignore
        )

namespace GMaps

open IntelliFactory.WebSharper
open IntelliFactory.WebSharper.Html
open IntelliFactory.WebSharper.Google.Maps

module GoogleMaps =
    open IntelliFactory.WebSharper.EcmaScript

    [<JavaScript>]
    let Sample buildMap =
        Div [Attr.Style "padding-bottom:20px; width:500px; height:300px;"]
        |>! OnAfterRender (fun mapElement ->
            let center = new LatLng(0.,0.)
            let options = new MapOptions(15, center, MapTypeId.ROADMAP)
            let map = new Google.Maps.Map(mapElement.Body, options)
            buildMap map)
.

How about making the asynchronous call when building the map? Such as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

...
module GoogleMaps =
    open IntelliFactory.WebSharper.EcmaScript
 
    [<JavaScript>]
    let Sample buildMap =
        Div [Attr.Style "padding-bottom:20px; width:500px; height:300px;"]
        |>! OnAfterRender (fun mapElement ->
            async {
                   let! position = Geolocation.GetPosition()
                   let coords = position.Coords
                   let center = new LatLng(coords.Latitude, coords.Longitude)
                   let options = new MapOptions(15, center, MapTypeId.ROADMAP)
                   let map = new Google.Maps.Map(mapElement.Body, options)
                   buildMap map
            }
            |> Async.Start |> ignore
)
By on 4/13/2013 5:05 AM ()

Thank you. :)

By on 4/13/2013 7:40 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper