Need an example of code for Displaying GPS Coordinates on map + My position

Joel Fonseca · Aug 26, 2011

Hello,

Pls can anyone give me an example how to make this:

I want to create a application that has this:

1) A list of GPS Coordinates of places i give + the name of that place, that i want to display them on the map.

2) Is it possible to display those coordinates on the map with a .png picture i have on my (files folder, is this possible?, or just in a url)

3) I want to be able to get my location where i am right now, and see the rest of the places distance from me.

And if possible to make the appz not needed to use the internet only for the maps. to be able to see those coordinates in an offline manner.

i searched the forums, got this example, but i'm not too deep into programming

, so if anyone could guide me with some nice code examples, i would really appreciate it, thanks in advance.

this is the part of the code i found on the forum and was messing around.
but it's already too late (03:56am) and i have to go to work at 08:00am, if some nice guru's of this forum could help me out, it would be really great

Joel

B4X:

'Activity module
Sub Process_Globals
   'These global variables will be declared once when the application starts.
   'These variables can be accessed from all modules.

End Sub

Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
   Dim MapWebView As WebView
   Dim ScaleLat, ScaleLong As Float
   Dim PosLat, PosLong As List
End Sub

Sub Activity_Create(FirstTime As Boolean)
   PosLat.Initialize
   PosLong.Initialize
   
'   ***** Localização da Pamela no mapa *****
   PosLat.Add(37.134062)
   PosLong.Add(-8.5445)
   
'   ***** Localização de teste ao pé da Pamela no mapa 02 *****   
   PosLat.Add(37.130829)
   PosLong.Add(-8.547463)

   PosLat.Add(37.136646)
   PosLong.Add(-8.551583)

   PosLat.Add(37.142325)
   PosLong.Add(-8.543773)

   PosLat.Add(37.143967)
   PosLong.Add(-8.563685)

   PosLat.Add(37.12029)
   PosLong.Add(-8.567033)
   
   MapWebView.Initialize("")
   Activity.AddView(MapWebView,0,0,100%x,100%y)
   
   ShowMap(38.712572, -9.135189, 5, True, True, True, "TOP_LEFT", True, PosLat, PosLong, True, True, "#ff0000", 0.5, 3)
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub ShowMap(CenterLat As Float, CenterLong As Float, Zoom As Int, MapTypeControl As Boolean, DispZoomControl As Boolean, DispScaleControl As Boolean, ScaleControlPosition As String, DispMarkerCenter As Boolean, MarkerLat As List, MarkerLong As List, DispMarkers As Boolean, DispPolyline As Boolean, PolyLineColor As String, PolyLineOpacity As Float, PolyLineWidth As Int)
   ' CenterLat        = latitude of map center in degrees
   ' CenterLong       = longitude of map center in degrees
   ' Zoom             = zomm index   0 - 21
   ' MapTypeControl   = true displays the map type control
   ' DispZoomControl  = true displays the zoom control otherwise false
   ' ScaleControl     = true displays the zoom control otherwise false
   ' ScaleControlPosition  = position of the scale control TOP_LEFT, TOP_CENTER, TOP_RIGHT, LEFT_CENTER, RIGHT_CENTER, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT
   ' DispMarkerCenter = true sets a marker on the center of the map
   ' MarkerLat          = List of lat  positions of the markers 
   ' MarkerLong          = List of long positions of the markers
   ' DipsMarkers         = true displays the markers
   ' DispPolyline       = true displays a polyline with the markers as vertices
   ' PolyLineColor    = polyline color hexadecimal  #ff0000 = red  #00ff00 = green   #0000ff = blue
   ' PolyLineOpacity  = polyline opacity  0.0  transparent   1.0 full opaque
   ' PolyLineWidth    = polyline width in pixels
   
    Dim HtmlCode As String
   Dim i, j As Int
   
   HtmlCode = "<!DOCTYPE html><html><head><meta name='viewport' content='initial-scale=1.0, user-scalable=no' /><style type='text/css'>  html { height: 100% }  body { height: 100%; margin: 0px; padding: 0px }#map_canvas { height: 100% }</style><script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script><script type='text/javascript'> function initialize() {var latlng = new google.maps.LatLng(" & CenterLat & "," & CenterLong & "); var myOptions = { zoom: "&Zoom&", center: latlng, disableDefaultUI: true, zoomControl: "& DispZoomControl & ", scaleControl: "& DispScaleControl & ", scaleControlOptions: {position: google.maps.ControlPosition." & ScaleControlPosition & "}, mapTypeControl: "& MapTypeControl& ", mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'),  myOptions)" 

   ' displays a marker on the map center
   If DispMarkerCenter = True Then   
      HtmlCode = HtmlCode & "; var markerc = new google.maps.Marker({   position: new google.maps.LatLng(" & CenterLat & "," & CenterLong & "),map: map, title: '',clickable: false,icon: 'http://www.google.com/mapfiles/arrow.png' })"
   End If
   
   ' displays markers on the map
   If MarkerLat.Size>0 AND DispMarkers = True Then
      j = MarkerLat.Size - 1
      If j = 0 Then
         HtmlCode = HtmlCode & "; var marker" & i & " = new google.maps.Marker({   position: new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & "),map: map, title: 'Test" & i & "',clickable: true, draggable: false, icon: 'http://img42.imageshack.us/img42/2521/penelopeicon.png' })"
'         HtmlCode = HtmlCode & "; google.maps.event.addListener(marker" & i & ", 'click', function() {alert('Marker1')} )"
      Else If j = 1 Then
         HtmlCode = HtmlCode & "; var marker" & i & " = new google.maps.Marker({   position: new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & "),map: map, title: 'Test" & i & "',clickable: true, draggable: false, icon: 'http://www.google.com/mapfiles/marker_green.png' })"
'         HtmlCode = HtmlCode & "; google.maps.event.addListener(marker" & i & ", 'click', function() {map.set_center(marker" & i & ")} )"
         HtmlCode = HtmlCode & "; var marker" & i & " = new google.maps.Marker({   position: new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & "),map: map, title: 'Test" & i & "',clickable: true, draggable: false, icon: 'http://www.google.com/mapfiles/marker.png' })"
'         HtmlCode = HtmlCode & "; google.maps.event.addListener(marker" & i & ", 'click', function() {map.set_center(marker" & i & ")} )"
      Else
         HtmlCode = HtmlCode & "; var marker0 = new google.maps.Marker({   position: new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & "),map: map, title: 'Test0',clickable: true, draggable: false, icon: 'http://www.google.com/mapfiles/marker_greenA.png' })"
'         HtmlCode = HtmlCode & "; google.maps.event.addListener(marker0, 'click', function() {alert('Marker0')} )"
         For i = 1 To j - 1 ' diplays the markers
            HtmlCode = HtmlCode & "; var marker" & i & " = new google.maps.Marker({   position: new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & "),map: map, title: 'Test" & i & "',clickable: true, draggable: false, icon: 'http://www.google.com/mapfiles/marker_orange" & Chr(i + 65) & ".png' })"
'            HtmlCode = HtmlCode & "; google.maps.event.addListener(marker" & i & ", 'click', function() {map.set_center(marker" & i & ")} )"
         Next
         HtmlCode = HtmlCode & "; var marker" & (j) & " = new google.maps.Marker({   position: new google.maps.LatLng(" & MarkerLat.Get(j) & "," & MarkerLong.Get(j) & "),map: map, title: 'Test" & j & "',clickable: true, draggable: false, icon: 'http://www.google.com/mapfiles/marker" & Chr(j + 65) & ".png' })"
'         HtmlCode = HtmlCode & "; google.maps.event.addListener(marker" & i & ", 'click', function() {map.set_center(marker" & i & ")} )"
      End If
      
'   ' displays a polyline between the markers
'      If DispPolyLine = True AND j > 0 Then
'         HtmlCode = HtmlCode & "; var points = ["
'         HtmlCode = HtmlCode & " new google.maps.LatLng(" & MarkerLat.Get(0) & "," & MarkerLong.Get(0) & ")"
'         For i=1 To j
'            HtmlCode = HtmlCode & ", new google.maps.LatLng(" & MarkerLat.Get(i) & "," & MarkerLong.Get(i) & ")"
'         Next
'         HtmlCode = HtmlCode & "] "
'         HtmlCode = HtmlCode & "; var polyline = new google.maps.Polyline({path: points, strokeColor: '" & PolyLineColor & "', strokeOpacity: " & PolyLineOpacity & ", strokeWeight: " & PolyLineWidth & "})"
'         HtmlCode = HtmlCode & "; polyline.setMap(map)"
'      End If
   End If
   HtmlCode = HtmlCode & "; }</script></head><body onload='initialize()'>  <div id='map_canvas' style='width:100%; height:100%'></div></body></html>"

   MapWebView.LoadHtml(HtmlCode)
End Sub

warwound · Aug 26, 2011

Hi.

Look at my post in the following thread:

http://www.b4x.com/forum/basic4android-updates-questions/9634-gps-location-google-map.html

The LocationMap example will give you code to get your location using GPS and open a Google Map centered on your location.

Adding markers to the map and making those markers open the map infowindow when clicked requires a basic knowledge of the Google Maps API.

The documentation for the latest version of the Google Maps API can be found HERE.

Check out the 'Basics' page: Google Maps Javascript API V3 Basics - Google Maps JavaScript API V3 - Google Code.

The 'Hello World' page: http://code.google.com/apis/maps/do...s/maps/documentation/javascript/tutorial.html.

And some rather good tutorials for beginners:

Google Maps API 3 – The basics | In usability we trust

Google Maps API 3 – Markers | In usability we trust

Google Maps API 3 â€“ InfoWindows | In usability we trust

That covers the basics and once you have a grasp on how the API can be used you are ready to create your own web application.
I'd suggest you develop your application as a web application using a decent HTML editor (Dreamweaver etc) and develop it in a desktop browser.
Modern browsers such as Firefox and Chrome include some very useful developer tools which will help you find code errors etc.

(If you try to develop the app using within a WebView you lack any real debugging tools and could waste much time debugging even a simple error!)

Once you have a working web application you should have no problems displaying it in a WebView and building a user-interface around it with B4A.

Martin.

Joel Fonseca · Aug 26, 2011

Hello, thanks for your reply, i did this test:

.html file:

B4X:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<!-- Reference to the map control -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?

sensor=false">
</script>

<script type="text/javascript">
var map;
function initialize() 
{
var myLatlng = new google.maps.LatLng(38.713108, -9.136906);
// sets the center of the map to the varible "LatLong" that contains the coordinates

var myOptions = 
{
zoom: 8,
// Zoom level for initial map. Valild vaues range form 0 to 20

center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
// sets the type of map to be displayed
// HYBRID - displays a transparent layer of major streets on satellite images
// ROADMAP - displays a normal street map 
// SATELLITE - displays satellite images
// TERRAIN - displays maps with physical features such as terrain
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var infowindow = new google.maps.InfoWindow(); 
// set the variable infowindow 


//**************************************************** Marker da Penelope no Mapa ****************************************************

var Penelope_marker = new google.maps.Marker
// set the variable marker
(
{
position: new google.maps.LatLng(37.134062, -8.5445),
// set the geographic position for the marker

map: map, 
// puts the marker on the specified map 

title:"Penelope",
// text that will display when the mouse cursor hovers over the marker

icon: 'penelope_icon.png'
// location of image file that will be used as a marker
}
)
;


google.maps.event.addListener
// Event addlistener for info window of marker
(
Penelope_marker, 
// associates the action with the marker named marker

'click', 
// declares which event will trigger the event
// Valid values are as follows
// click, dblclick, mousedown, mousemove, mouseout, mouseover,mouseup, rightclick 


function() 
{
infowindow.setContent('<font color=#FF00FF>Penelope - Atende perto do Modelo de Portimão</font>'); 
// sets the content for the info window (any valid html will do here

infowindow.open(map,Penelope_marker);
// sets the info window to open based on the event
}
);





//**************************************************** Marker da Ana Mendes no Mapa ****************************************************


var Ana_Mendes_marker = new google.maps.Marker
(
{
position: new google.maps.LatLng(38.731037, -9.146422),

map: map, 

title:"Ana Mendes",

icon: 'ana_mendes_icon.png'
}
)
;


google.maps.event.addListener
(
Ana_Mendes_marker, 

'click', 


function() 
{
infowindow.setContent('<font color=#FF00FF>Ana Mendes - Atende perto das Picoas</font>'); 

infowindow.open(map,Ana_Mendes_marker);
}
);

//**************************************************** Marker da _____ no Mapa ****************************************************










}
</script>
</head>
<title>Basic Google Map with an Image Marker v3</title>
<body bgcolor="#FFFFFF" onload="initialize()">

<div id="map_canvas" style="width:100%; height:100%"></div>

</body>
</html>

and the Basic4android project:

B4X:

'Activity module
Sub Process_Globals
   'These global variables will be declared once when the application starts.
   'These variables can be accessed from all modules.

End Sub

Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.

End Sub

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("webviewmapa")         ' loads the layout file
   Dim Webview1 As WebView
   
   WebView1.Initialize("")
   WebView1.LoadUrl("file:///android_asset/localizacao.html")

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

I have all the files on the TesteLocalizacao\Files

ana_mendes_icon.png
localizacao.html
penelope_icon.png
webviewmapa.bal

But when i compile and run on the emulator or phone it only show's me a white screen

, if i press in the white screen i am able to see the - and + of the google maps button but i can't see any map, anything

, what is the problem here ?, i'm feeling crazy

damn, help is really appreciated, thanks in advance

i will attach the complete project stated here so anyone could have a look and point me the problem. the .html file works great in the internet explorer browser.

Erel · Aug 26, 2011

Did you add the WebView with the designer?
In that case you should not Dim and initialize it again. You should instead go to the designer and choose Tools - Generate members.

Joel Fonseca · Aug 26, 2011

Hi, i did as you told me and still is all white

could you pls download the project and watch it on your pc to see what is the problem, thanks in advance,

Joel

Erel · Aug 26, 2011

Please upload your updated project first. You should use File - Export to zip instead of zipping it manually.

Joel Fonseca · Aug 26, 2011

Here's the project.zip

Erel · Aug 26, 2011

You should either create the WebView programmatically or with the designer. If you are creating it programmatically then you need to add it to the activity by calling Activity.AddView.

I recommend you to start with reading the Begginer's guide: Download Android Development Tool - Basic4android

Joel Fonseca · Aug 26, 2011

Erel did you manage to look into my project to try to see my .html file inside the webview ?

Erel · Aug 26, 2011

Please see my answer above. You are not adding the WebView correctly.

Joel Fonseca · Aug 26, 2011

could you pls give me an example code what should be done then ?

thanks,

Joel

Erel · Aug 26, 2011

There are many examples in the guide for building layouts.
You can also go over this example: Guess my number - Visual designer & Events

Joel Fonseca · Aug 26, 2011

Erel man, is it difficult to just post a little code here so ppl like me that have difficult with this can see and learn with it, you could make that very fast, you rock on this

with this code:

B4X:

Sub Globals
  Dim MapWebView As WebView
End Sub
 
Sub Activity_Create(FirstTime As Boolean)
  MapWebView.Initialize("")
  Activity.AddView(MapWebView,0,0,100%x,100%y)
  ShowMap(38.713108, -9.136906, 8)
End Sub

Sub ShowMap(Latitude As Float, Longitude As Float, Zoom As Int)

  
  Dim s As String

  s = File.GetText(File.DirAssets, "localizacao.html")
  MapWebView.LoadHtml(s)
  

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

i am able to see the map in my phone but not the marks inside the "localizacao.html"

HELP!!!!!

:sign0085:

klaus · Aug 26, 2011

There are different problems in your code you posted in post #7:

B4X:

Sub Globals
 
End Sub
 
Sub Activity_Create(FirstTime As Boolean)
 Activity.LoadLayout("webviewmapa") ' loads the layout file
 Dim Webview1 As WebView

 WebView1.Initialize("")
 WebView1.LoadUrl("file:///android_asset/localizacao.html")
End Sub

It should be:

B4X:

Sub Globals
 Dim Webview1 As WebView
End Sub
 
Sub Activity_Create(FirstTime As Boolean)
 Activity.LoadLayout("webviewmapa") ' loads the layout file
 WebView1.LoadHTML("file:///android_asset/localizacao.html")
End Sub

- You should declare Dim Webview1 As WebView in Sub Globals.
- You must not initialize the WebView1 view because it is already defined in the layout file.
- Then you call WebView1.LoadUrl instead of WebView1.LoadHTML.
- And at the last it seems that your html file is not correct.
I have not investigated at the html lavel.

Best regards.

warwound · Aug 27, 2011

Ho Joel.

Here's some working code:

B4X:

'Activity module
Sub Process_Globals
   'These global variables will be declared once when the application starts.
   'These variables can be accessed from all modules.

End Sub

Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
   Dim WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("webviewmapa")         ' loads the layout file
   
   WebView1.LoadUrl("file:///android_asset/localizacao.html")
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

I also added some code to your map javascript that will adjust the map center and zoom so that the map shows both markers when loaded.
You can remove it or comment it out if not needed of course.

Martin.

Joel Fonseca · Aug 27, 2011

Thank you all

warwound man, your code rocks, you save my life hehehe

Great contribution to this forum

Thanks again, :sign0087:

Joel

dunski · May 29, 2012

warwound said:
Ho Joel.

Here's some working code:

I also added some code to your map javascript that will adjust the map center and zoom so that the map shows both markers when loaded.
You can remove it or comment it out if not needed of course.

Martin.

I think you should leave the Markers in. Very Informative...:SHOCKED:::SHOCKED:

Need an example of code for Displaying GPS Coordinates on map + My position

Joel Fonseca

Member

warwound

Expert

Joel Fonseca

Member

Erel

B4X founder

Joel Fonseca

Member

Erel

B4X founder

Joel Fonseca

Member

Attachments

Erel

B4X founder

Joel Fonseca

Member

Erel

B4X founder

Joel Fonseca

Member

Erel

B4X founder

Joel Fonseca

Member

klaus

Expert

warwound

Expert

Attachments

Joel Fonseca

Member

dunski

Member