Draw radius around a point in Google map using WebMapViewer

Targets Web
1

Does anybody knows how to draw a radius circle on a location point?

I created a Web Project with WebMapViewer and added 5 WebMapLocations.
I wanted to draw in each location a circle radius of 3 kms.

Hope somebody came across how to do this.

2

Hello @Bon Jun Cuevas ,

I believe this can be achieved in Xojo. I remember we did something similar for determining delivery areas, but I can’t locate the example right now.

First, here is a link to an example using the Google Maps API showing that the concept is achievable.

Try,

  1. Modifying the function createCircle() from the example for your purposes;
  2. From the Library drag a PageSource control to your page.
  3. Add the Javascript function createCircle() to your page source.
  4. Then, assuming you are using the Open or Shown event to place your location markers, use Me.ExecuteJavascipt to pass your locations to the createCircle() function.

PS: I don’t recall needing to placing any code in the HTML Header (of your App), as Xojo has already used your API key to connect to the maps API, however if it doesn’t work try placing in your HTML Header.

I hope that helps.

Kind regards, Andrew

3

Thanks @Andrew Paul Dickey for the steps.
I will dig into it. Since I don’t have background in Javascript and did not use PageSource control yet.

I will get back when its done or if needed further help.

4

Hello Bon,

As an interim step in understanding the Javascript example referred to above, I created an example project you can access here.
The project has 1x WebTextArea (preloaded with the HTML code from the example) and 1 x WebHTMLViewer within which to see the code in action. You need to replace the word YOUR-KEY with a working Google Maps API Key. There is a button that simply loads the code from the WebTextArea and displays it in the WebHTMLViewer live. Play around, when you break it just reload the page and try again.

The point is with a bit a trial-and-error, you should be able to learn enough to try and to place a circle or radius when loading each location on your map by using the technique suggested earlier.

Kind regards, Andrew