Playing with google maps API
The google maps API can drive the google maps with javascript properties,methods and events.
its a web service provided to display any map given with its longitude/latitude (even with its place).The maps are recorded at Google services (mandatory sometimes ago, not on line and have free and $ versions with various capabilities!)
Unfortunatly,in my knowledge ,there is no vfp library to traverse these google applications , even no automation.the only way to work from vfp is to build an html page and add some javascript done by google apis.
In the code below ,can configure all parameters from vfp and build a web page easily with vfp.the page is shown on an emulated internet explorer application with html5 tag(!DOCTYPE html).
Depending on location some google maps futures are enabled or not.
this is a basic demo with google maps.can add more commands for advanced futures.
*some links to read.
*https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions
*https://developers.google.com/maps/documentation/android/map
*http://www.w3schools.com/googleapi/google_maps_ref.asp
*http://www.w3schools.com/googleAPI/ref_mapoptions.asp
*Constants Description
*HYBRID This map type displays a transparent layer of major streets on satellite images.
*ROADMAP This map type displays a normal street map.
*SATELLITE This map type displays satellite images.
*TERRAIN This map type displays maps with physical features such as terrain and vegetation.
Of course internet must be connected to run the 7 codes below.If having problems with privelege level (or fired errors ) run vfp9.exe as adlministrator.
Click on code to select [then copy] -click outside to deselect
*1*
Publi yform
yform=Newobject("ymaps")
yform.Show
Read Events
Retu
*
Define Class ymaps As Form
BorderStyle = 0
Top = 7
Left = 136
Height = 434
Width = 348
ShowWindow = 2
Caption = "yMaps"
MaxButton = .F.
Name = "Form1"
Add Object command1 As CommandButton With ;
Top = 384, ;
Left = 84, ;
Height = 48, ;
Width = 156, ;
Caption = "Show Map", ;
Name = "Command1"
Add Object optiongroup1 As OptionGroup With ;
AutoSize = .T., ;
ButtonCount = 4, ;
Value = 2, ;
Height = 84, ;
Left = 12, ;
Top = 72, ;
Width = 315, ;
Name = "Optiongroup1", ;
Option1.Caption = "ROADMAP (normal, default 2D map)", ;
Option1.Value = 0, ;
Option1.Height = 17, ;
Option1.Left = 5, ;
Option1.MousePointer = 1, ;
Option1.Top = 5, ;
Option1.Width = 216, ;
Option1.AutoSize = .T., ;
Option1.Name = "Option1", ;
Option2.Caption = "SATELLITE (photographic map)", ;
Option2.Value = 1, ;
Option2.Height = 17, ;
Option2.Left = 5, ;
Option2.Top = 24, ;
Option2.Width = 191, ;
Option2.AutoSize = .T., ;
Option2.Name = "Option2", ;
Option3.Caption = "HYBRID (photographic map + roads and city names)", ;
Option3.Height = 17, ;
Option3.Left = 5, ;
Option3.Top = 43, ;
Option3.Width = 305, ;
Option3.AutoSize = .T., ;
Option3.Name = "Option3", ;
Option4.Caption = "TERRAIN (map with mountains, rivers, etc.)", ;
Option4.Height = 17, ;
Option4.Left = 5, ;
Option4.Top = 62, ;
Option4.Width = 254, ;
Option4.AutoSize = .T., ;
Option4.Name = "Option4"
Add Object spinner1 As Spinner With ;
FontBold = .T., ;
Height = 30, ;
KeyboardHighValue = 30, ;
KeyboardLowValue = 0, ;
Left = 144, ;
MousePointer = 15, ;
SpinnerHighValue = 30.00, ;
SpinnerLowValue = 0.00, ;
Top = 180, ;
Width = 73, ;
Value = 16, ;
Name = "Spinner1"
Add Object label2 As Label With ;
AutoSize = .T., ;
Caption = "Latitude", ;
Height = 17, ;
Left = 24, ;
Top = 12, ;
Width = 46, ;
Name = "Label2"
Add Object text1 As TextBox With ;
Height = 25, ;
Left = 89, ;
Top = 7, ;
Width = 157, ;
Name = "Text1"
Add Object label3 As Label With ;
AutoSize = .T., ;
Caption = "Longitude", ;
Height = 17, ;
Left = 25, ;
Top = 49, ;
Width = 57, ;
Name = "Label3"
Add Object text2 As TextBox With ;
Height = 25, ;
Left = 91, ;
Top = 44, ;
Width = 157, ;
Name = "Text2"
Add Object label1 As Label With ;
AutoSize = .T., ;
Caption = "Zoom", ;
Height = 17, ;
Left = 95, ;
Top = 187, ;
Width = 34, ;
Name = "Label1"
Add Object check1 As Checkbox With ;
Top = 218, ;
Left = 12, ;
Height = 17, ;
Width = 90, ;
AutoSize = .T., ;
Alignment = 0, ;
Caption = "uiPanControl", ;
Value = 1, ;
Name = "Check1"
Add Object check2 As Checkbox With ;
Top = 228, ;
Left = 139, ;
Height = 17, ;
Width = 134, ;
AutoSize = .T., ;
Alignment = 0, ;
Caption = "Disabe All uiControls", ;
Value = 0, ;
Enabled = .T., ;
Name = "Check2"
Add Object check3 As Checkbox With ;
Top = 243, ;
Left = 12, ;
Height = 17, ;
Width = 100, ;
AutoSize = .T., ;
Alignment = 0, ;
Caption = "uiZoomControl", ;
Value = 1, ;
Name = "Check3"
Add Object check4 As Checkbox With ;
Top = 265, ;
Left = 12, ;
Height = 17, ;
Width = 106, ;
AutoSize = .T., ;
Alignment = 0, ;
Caption = "uiScalenControl", ;
Value = 1, ;
Name = "Check4"
Add Object check5 As Checkbox With ;
Top = 290, ;
Left = 12, ;
Height = 17, ;
Width = 109, ;
AutoSize = .T., ;
Alignment = 0, ;
Caption = "mapTypeControl", ;
Value = 1, ;
Name = "Check5"
Add Object check6 As Checkbox With ;
Top = 327, ;
Left = 12, ;
Height = 17, ;
Width = 118, ;
AutoSize = .T., ;
Alignment = 0, ;
Caption = " streetViewControl", ;
Value = 1, ;
Name = "Check6"
Add Object check7 As Checkbox With ;
Top = 348, ;
Left = 12, ;
Height = 17, ;
Width = 89, ;
AutoSize = .T., ;
Alignment = 0, ;
Caption = "rotateControl", ;
Value = 1, ;
Name = "Check7"
Add Object check8 As Checkbox With ;
Top = 308, ;
Left = 11, ;
Height = 17, ;
Width = 128, ;
AutoSize = .T., ;
Alignment = 0, ;
Caption = "overviewMapControl", ;
Value = 1, ;
Name = "Check8"
Procedure Load
Set Safe Off
Endproc
Procedure Destroy
Clea Events
Endproc
Procedure command1.Click
*https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions
*https://developers.google.com/maps/documentation/android/map
*http://www.w3schools.com/googleapi/google_maps_ref.asp
*Constant Description
*HYBRID This map type displays a transparent layer of major streets on satellite images.
*ROADMAP This map type displays a normal street map.
*SATELLITE This map type displays satellite images.
*TERRAIN This map type displays maps with physical features such as terrain and vegetation.
Declare Integer Sleep In kernel32 Integer
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32;
INTEGER HWnd,;
STRING lpString
Local m.xmapTypeId,m.xzoom,m.uiCompass,m.uiControls
With Thisform.optiongroup1
Do Case
Case .Value=1
m.xmapTypeId="ROADMAP"
Case .Value=2
m.xmapTypeId="SATELLITE"
Case .Value=3
m.xmapTypeId="HYBRID"
Case .Value=4
m.xmapTypeId="TERRAIN"
Endcase
Endwith
Local m.xx
If Thisform.check2.Value=0
TEXT to m.xx textmerge noshow
panControl: <<iif(thisform.check1.value=1,"true","false")>>,
zoomControl:<<iif(thisform.check3.value=1,"true","false")>>,
scaleControl:<<iif(thisform.check4.value=1,"true","false")>>,
mapTypeControl:<<iif(thisform.check5.value=1,"true","false")>>,
streetViewControl:<<iif(thisform.check6.value=1,"true","false")>>,
overviewMapControl:<<iif(thisform.check8.value=1,"true","false")>>,
overviewMapControl:<<iif(thisform.check6.value=1,"true","false")>>,
rotateControl:<<iif(thisform.check7.value=1,"true","false")>>
ENDTEXT
Else
TEXT to m.xx textmerge noshow
disableDefaultUI:<<iif(thisform.check2.value=1,"true","false")>>
ENDTEXT
Endi
*messagebox(m.xx)
Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body bgcolor=black oncontextmenu="return true;">
<button onclick="alert(map.getCenter());">Get center(latitude/longitude)</button>
<label style="color:white" > Right Click here to see the contextuel menu</label>
<br>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat:<<thisform.text1.value>> , lng: <<thisform.text2.value>> },
zoom: <<thisform.spinner1.value>>,
mapTypeId: google.maps.MapTypeId.<<m.xmapTypeId>>,
<<m.xx>>
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
ENDTEXT
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"ymaps.html"
Strtofile(m.myvar,m.lcdest)
Publi api
apie=Newobject("internetexplorer.application")
With apie
.silent=.t.
.menubar=0
.Toolbar=0
.StatusBar=0
.Resizable=1
.Navigate(m.lcdest)
.Width=Sysmetric(1)-10
.Height=Sysmetric(2)-10
.Top=0
.Left=(Sysmetric(1)-.Width)/2
BringWindowToTop(.HWnd)
Sleep(1000)
SetWindowText(.HWnd,"ymaps : latitude="+Trans(Thisform.text1.Value)+" , longitude="+Trans(Thisform.text2.Value))
.Visible=.T.
Endwith
Retu
Endproc
Procedure optiongroup1.Init
This.SetAll('mousepointer',15,"optionbutton")
Endproc
Procedure text1.Init
This.Value=33.6819056
Endproc
Procedure text2.Init
Thisform.text2.Value=1.01878056
Endproc
Enddefine
*
*-- EndDefine: ymaps
can show the latitude/longitude of the map center in alert window (click button).can fire the contextuel menu (on window top to preview/print...)-Note google maps images are protected by copyrights.
Click on code to select [then copy] -click outside to deselect
*2*this is a mixed code vfp/javascript to search for any map by place on the world
*can customize as the code above all parameters on a form and then fire the page in ie application.
Set Safe Off
Declare Integer Sleep In kernel32 Integer
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32;
INTEGER HWnd,;
STRING lpString
Local m.y
TEXT to m.y noshow
El Bayadh is the chief town of the province of the same nom.it has an area of 71ooo km2 and is located in the SAHARIAN ATLAS.Its played a big role during the liberation wars in the 19th century and 20th century against the french occupant.[latitude= 33.6581139 , longitude=1.020322]
ENDTEXT
Local m.xlng,m.lat
m.xlng=1.01878056
m.xlat=33.6819056
Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
<title>Places Searchbox</title>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: <<m.xlat>>, lng: <<m.xlng>>},
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
//create a place variable and build a marker with some info(normal or unicode text)
var xplace={lat: <<m.xlat>>, lng: <<m.xlng>>};
var infowindow = new google.maps.InfoWindow;
infowindow.setContent("<b> <<m.y>> </b>");
var marker = new google.maps.Marker({map: map, position:xplace});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
// [END region_getplaces]
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
ENDTEXT
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"ymaps.html"
Strtofile(m.myvar,m.lcdest)
Publi api
apie=Newobject("internetexplorer.application")
With apie
.silent=.T.
.menubar=0
.Toolbar=0
.StatusBar=0
.Resizable=1
.Navigate(m.lcdest)
.Width=Sysmetric(1)-10
.Height=Sysmetric(2)-10
.Top=0
.Left=(Sysmetric(1)-.Width)/2
BringWindowToTop(.HWnd)
Sleep(1000)
SetWindowText(.HWnd,"ymaps :Searching google maps by place")
.Visible=.T.
Endwith
Retu
Can build a marker with tip info as text with one line (no crlf).text can be utf-8 (unicode as arabic,chinese,...supported by html))
Click on code to select [then copy] -click outside to deselect
*3*this code draws some figures (here transparent circles (radius proprtional to city population)).The mousemove on the map retrieves for each map point latitude and longitude textbox.
*cities must be in one word (as google place names).
Declare Integer Sleep In kernel32 Integer
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32;
INTEGER HWnd,;
STRING lpString
Set Safe Off
Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<CENTER><input type="text" id="ylab" style="color:red;width:600px" value="HERE LATITUDE AND LONGITUDE POINTS ON MOUSEMOVE"></center>
<div id="map"></div>
<script>
// This example creates circles on the map, representing populations in Algeria (fictional for demo only).
// First, create an object containing LatLng and population for each city.
var citymap = {
elbayadh: {
center: {lat: 33.6695, lng: 1.0217},
population: 200000
},
alger: {
center: {lat: 36.7665, lng: 3.0212},
population: 1505837
},
oran: {
center: {lat: 35.6841, lng: -0.6372},
population: 1107790
},
laghouat: {
center: {lat: 33.7423, lng: 2.8125},
population: 203502
},
saida: {
center: {lat: 34.8228, lng: 0.1318},
population: 243502
},
annaba: {
center: {lat: 36.8972, lng: 7.7673},
population: 703502
},
constantine: {
center: {lat: 36.3594, lng: 6.6248},
population: 1203502
},
biskra: {
center: {lat: 34.8228, lng: 5.7458},
population: 303502
},
tiaret: {
center: {lat: 35.3353, lng: 1.3103},
population: 200000
}
};
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 34.6332, lng: 3.2739},
mapTypeId: google.maps.MapTypeId.HYBRID
});
google.maps.event.addListener(map, 'mousemove', function (event) {
displayCoordinates(event.latLng);
});
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
// Add the circle for this city to the map.
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: 'LIME',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 100
});
}
}
//mousemove--> lat,lng
function displayCoordinates(pnt) {
var lat = pnt.lat();
lat = lat.toFixed(4);
var lng = pnt.lng();
lng = lng.toFixed(4);
document.getElementById("ylab").value="Latitude: " + lat + " Longitude: " + lng;
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>
</body>
</html>
ENDTEXT
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"ymaps.html"
If File(m.lcdest)
Dele File (lcdest)
Endi
Strtofile(m.myvar,m.lcdest)
Publi apie
apie=Newobject("internetexplorer.application")
With apie
.silent=.T.
.menubar=0
.Toolbar=0
.StatusBar=0
.Resizable=1
.Navigate(m.lcdest)
.Width=Sysmetric(1)-10
.Height=Sysmetric(2)-10
.Top=0
.Left=(Sysmetric(1)-.Width)/2
BringWindowToTop(.HWnd)
Sleep(1000)
SetWindowText(.HWnd,"ymaps : drawing transparent figures (circles) on map")
.Visible=.T.
Endwith
This code is used to get the position of any point(latitude,longitude) and to configure the mapcity javascript variable in code.
Click on code to select [then copy] -click outside to deselect
*4*
*updated on mercredi 7 octobre 2015; 15:11:57
*retrieves a google map itinerary from a known town to a destination town
*accepts also 2 coordinates points given by (latitude,lingitude) from to (latitude,longitude) destination
*Warning: replace the google map of your custom country.In algeria its
*https://www.google.dz/ --> (string 'dz' to replace)
*google dont draw all itineraries.it can fail on non known towns(data dont gathered by google).
Do ydeclare
Local m.yfrom,m.yto
m.yfrom=Inputbox("From a known town","","EL BAYADH" )
m.yto=Inputbox("To a known town","","ALGER")
If Empty(m.yfrom) Or Empty(m.yto)
Return .F.
Else
m.yfrom=Allt(Strtran(m.yfrom," ","-"))
m.yto=Allt(Strtran(m.yto," ","-"))
Endi
Local m.url
m.url="https://www.google.dz/maps/dir/"+m.yfrom+"/"+m.yto
Messagebox(m.url,0+32+4096,'',1500)
_Cliptext=m.url &&url in clipboard
Local apie
apie=Newobject("internetexplorer.application")
With apie
.Navigate(m.url)
.Width=Sysmetric(1)
.Height=Sysmetric(2)-30
.Left=0
.Top=0
.menubar=0
.StatusBar=0
.Toolbar=0
sleep(4000) &&pass transitionnings
=setwindowText(.HWnd,"google map ininerary: "+m.url)
=bringWindowToTOp(.HWnd)
.Visible=.T.
Endwith
Procedure ydeclare
Declare Integer BringWindowToTop In user32 Integer
Declare Integer SetWindowText In user32 Integer,String
Declare Integer Sleep In kernel32 Integer
Endproc
this follow code creates a polyline intinerary based on coordonees (latitude,longitude) of each map point clicked.it adds a marker and draw a red polyline betwwen
points marked on Google map.This code is adapted from google maps APIs samples.
Of course its a javascript source drived and overlapped by VFP.Its the very simple way to play with all javascript codes from vfp.
the vfp statement Text textmerge/endtext permit to pass parameters to javascript et voila!
Click on code to select [then copy] -click outside to deselect
*5* updated on thirsday 15 octobre 2015; 21:35:46
Publi yform
yform=Newobject("yPolylines")
yform.Show
Read Events
Retu
*
Define Class yPolylines As Form
Height = 558
Width = 917
ShowWindow = 2
AutoCenter = .T.
Caption = "google maps PolyLines interactively."
BackColor = Rgb(0,0,0)
Name = "Form1"
Add Object obrowser As OleControl With ;
Oleclass="Shell.explorer.2",;
Top = 36, ;
Left = 8, ;
Height = 517, ;
Width = 901, ;
Anchor = 15, ;
Name = "oBrowser"
Add Object label1 As Label With ;
AutoSize = .T., ;
FontSize = 12, ;
Anchor = 768, ;
BackStyle = 0, ;
Caption = "Lat", ;
Height = 21, ;
Left = 48, ;
Top = 0, ;
Width = 24, ;
ForeColor = Rgb(255,255,255), ;
Name = "Label1"
Add Object text1 As TextBox With ;
Anchor = 768, ;
Height = 25, ;
Left = 81, ;
Top = 0, ;
Width = 109, ;
Name = "Text1"
Add Object label2 As Label With ;
AutoSize = .T., ;
FontBold = .F., ;
FontSize = 12, ;
Anchor = 768, ;
BackStyle = 0, ;
Caption = "Lng", ;
Height = 21, ;
Left = 207, ;
Top = 0, ;
Width = 28, ;
ForeColor = Rgb(255,255,255), ;
Name = "Label2"
Add Object text2 As TextBox With ;
Anchor = 768, ;
Height = 25, ;
Left = 240, ;
Top = 0, ;
Width = 109, ;
Name = "Text2"
Add Object command1 As CommandButton With ;
Top = 0, ;
Left = 372, ;
Height = 25, ;
Width = 37, ;
FontSize = 11, ;
Anchor = 768, ;
Caption = "Go", ;
MousePointer = 15, ;
SpecialEffect = 2, ;
ForeColor = Rgb(255,0,0), ;
BackColor = Rgb(0,255,0), ;
Name = "Command1"
Add Object label3 As Label With ;
AutoSize = .T., ;
FontBold = .T., ;
FontSize = 18, ;
Anchor = 768, ;
BackStyle = 0, ;
Caption = "?", ;
Height = 32, ;
Left = 815, ;
MousePointer = 15, ;
Top = 0, ;
Width = 17, ;
ForeColor = Rgb(0,255,0), ;
Name = "Label3"
Add Object command2 As CommandButton With ;
Top = 0, ;
Left = 684, ;
Height = 25, ;
Width = 108, ;
FontBold = .T., ;
FontSize = 10, ;
Anchor = 768, ;
Caption = "Capture map", ;
MousePointer = 15, ;
SpecialEffect = 2, ;
ForeColor = Rgb(0,0,255), ;
BackColor = Rgb(255,128,64), ;
Name = "Command2"
Procedure Init
* Center the map on El Bayadh Algeria
Local m.xlat,m.xlg
With Thisform
.Width=900
.Height=650
.AutoCenter=.T.
.text1.Value=33.677184
.text2.Value=1.010837
Endwith
Endproc
Procedure Load
Declare Integer keybd_event In Win32API ;
INTEGER, Integer, Integer, Integer
Declare Integer Sleep In kernel32 Integer
Endproc
Procedure Destroy
Clea Events
Endproc
Procedure obrowser.Init
This.silent=.T.
Endproc
Procedure command1.Click
* Initially Center the map on El Bayadh Algeria
Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Interactive Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body >
<div id="map"></div>
<script>
var poly;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: <<thisform.text1.value>>, lng: <<thisform.text2.value>> ,
}
});
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
poly = new google.maps.Polyline({
strokeColor: 'red' ,
strokeOpacity: 1.0,
strokeWeight: 4
});
poly.setMap(map);
// Add a listener for the click event
map.addListener('click', addLatLng);
}
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
ENDTEXT
Set Safe Off
Local m.lcdest
m.lcdest=Addbs(Justpath(Sys(2023)))+" gmap.html"
Strtofile(m.myvar,m.lcdest)
Thisform.obrowser.Navigate(m.lcdest)
Endproc
Procedure label3.Click
Local m.myvar
TEXT to m.myvar noshow
This example creates an interactive map which constructs a polyline based on user clicks.
Note that the polyline only appears once its path property contains two
LatLng coordinates.
Enter latitude and longitude in 2 textboxes and go.
click on any point to make polylines drawings.
the map is hybrid(displays a mixture of normal and satellite views).can choose another types.
can resize the map with resizing the form.
can capture map on form into Mspaint(can modify/save..)
ENDTEXT
Messagebox(m.myvar,0+32+4096,"Google maps polylines")
Endproc
Procedure command2.Click
_Screen.Visible=.F.
With Thisform
.label1.Top=-60
.text1.Top=-60
.label2.Top=-60
.text2.Top=-60
.label3.Top=-60
.command1.Top=-60
Endwith
This.Top=-60
Sleep(2000)
&&capture active window
VK_SNAPSHOT = 44 && from the winuser.h
VK_LMENU = 164
KEYEVENTF_KEYUP = 2
KEYEVENTF_EXTENDEDKEY = 1
*The following commands copy the active application window to the
*clipboard (the equivalent of ALT+PrintScrn):click on the window to getfocus.
keybd_event( VK_LMENU, 0, KEYEVENTF_EXTENDEDKEY, 0 )
keybd_event( VK_SNAPSHOT, 0, KEYEVENTF_EXTENDEDKEY, 0 )
keybd_event( VK_LMENU, 0, KEYEVENTF_EXTENDEDKEY + KEYEVENTF_KEYUP, 0 )
keybd_event( VK_SNAPSHOT, 0, KEYEVENTF_EXTENDEDKEY + KEYEVENTF_KEYUP, 0 )
DoEvents
Sleep(2000)
With Thisform
.label1.Top=.label1.Top+60
.text1.Top=.text1.Top+60
.label2.Top=.label2.Top+60
.text2.Top=.text2.Top+60
.label3.Top=.label3.Top+60
.command1.Top=.command1.Top+60
Endwith
This.Top=This.Top+60
Sleep(2000)
Run/n3 "mspaint"
Sleep(2000)
oshell=Createobject("wscript.shell")
oshell.sendkeys("^{v}")
Sleep(500)
_Screen.Visible=.T.
Endproc
Enddefine
*
*-- EndDefine:yPolylines
Click on code to select [then copy] -click outside to deselect
*6* added on friday 13 november 2015; 18:53:14
*this code retrieves foran any known town its latitude and longitude
local m.myvar
text to m.myvar noshow
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
function initialize() {
var address = (document.getElementById('my-address'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
document.getElementById("my-lat").value="";
document.getElementById("my-long").value="";
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("my-address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById("my-lat").value=results[0].geometry.location.lat()
document.getElementById("my-long").value=results[0].geometry.location.lng()
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body BGCOLOR=BLACK>
<input type="text" id="my-address" value="El Bayadh">
<button id="getCords" onClick="codeAddress();">getLat&Long</button>
<input type="text" id="my-lat" value="33.65813869999999" readonly> <input type="text" id="my-long" value="1.020322399999941" readonly>
</body>
</html>
endtext
local m.lcdest
m.lcdest=addbs(sys(2023))+"ywidget0.html"
=strtofile(m.myvar,m.lcdest)
declare integer BringWindowToTop in user32 integer
declare integer SetWindowText in user32 integer,string
local apie
apie=newObject("internetexplorer.application")
with apie
.silent=.t.
.menubar=0
.toolbar=0
.statusbar=0
.resizable=0
.width=600
.height=250
.top=50
.left=50
.navigate(m.lcdest)
bringwindowtotop(.hwnd)
.visible=.t.
inke(1)
setWindowText(.hwnd,"Get (Lat,Long) for any town wityh Google APIs")
endwith
can with the same method reverse : having latitu+longitude....find the town.can also add the google map to the code.
Click on code to select [then copy] -click outside to deselect
*7*
*this code makes a request to google static for returning an image of the map with the custom datas.it composes an url for this purpose.
*can save image by rightclick on browser.
*a key is delivred by this site (to add at the end of the url)
*my key=AIzaSyCgV2ZCZb3S_UxU8bAhypnbWarjDk43JbQ
Publi yform
yform=Newobject("ymap")
yform.Show
Read Events
Retu
*
Define Class ymap As Form
BorderStyle = 0
Height = 505
Width = 621
ShowWindow = 2
AutoCenter = .T.
Caption = "Request google map as image"
BackColor = Rgb(0,0,0)
Name = "Form1"
Add Object command1 As CommandButton With ;
AutoSize = .F., ;
Top = 18, ;
Left = 444, ;
Height = 48, ;
Width = 108, ;
FontSize = 14, ;
Caption = "Request", ;
MousePointer = 15, ;
ForeColor = Rgb(255,128,0), ;
BackColor = Rgb(128,255,0), ;
Name = "Command1"
Add Object olecontrol1 As OleControl With ;
oleclass="shell.explorer.2",;
Top = 84, ;
Left = 0, ;
Height = 420, ;
Width = 620, ;
Name = "Olecontrol1"
Add Object text1 As TextBox With ;
Height = 25, ;
Left = 32, ;
Top = 2, ;
Width = 97, ;
Name = "Text1"
Add Object text2 As TextBox With ;
Height = 25, ;
Left = 37, ;
Top = 35, ;
Width = 97, ;
Name = "Text2"
Add Object text3 As TextBox With ;
Height = 25, ;
Left = 177, ;
Top = 2, ;
Width = 52, ;
Name = "Text3"
Add Object label1 As Label With ;
AutoSize = .T., ;
Caption = "LAT", ;
Height = 17, ;
Left = 1, ;
Top = 6, ;
Width = 23, ;
Name = "Label1"
Add Object label2 As Label With ;
AutoSize = .T., ;
Caption = "Long", ;
Height = 17, ;
Left = 4, ;
Top = 36, ;
Width = 30, ;
Name = "Label2"
Add Object label3 As Label With ;
AutoSize = .T., ;
Caption = "Zoom", ;
Height = 17, ;
Left = 138, ;
Top = 7, ;
Width = 34, ;
Name = "Label3"
Add Object label4 As Label With ;
AutoSize = .T., ;
Caption = "Dim", ;
Height = 17, ;
Left = 148, ;
Top = 34, ;
Width = 25, ;
Name = "Label4"
Add Object text4 As TextBox With ;
Height = 25, ;
Left = 180, ;
Top = 31, ;
Width = 96, ;
Name = "Text4"
Add Object combo1 As ComboBox With ;
Height = 25, ;
Left = 252, ;
Top = 2, ;
Width = 96, ;
Name = "Combo1"
Procedure Destroy
Clea Events
Endproc
Procedure command1.Click
Local m.url
TEXT to m.url textmerge noshow
http://maps.google.com/maps/api/staticmap?center=<<thisform.text1.value>>,<<thisform.text2.value>>&zoom=<<thisform.text3.value>>&size=<<thisform.text4.value>>&maptype=<<thisform.combo1.value>>&sensor=false&language=&markers=color:red|label:none|<<thisform.text1.value>>,<<thisform.text2.value>>&key=AIzaSyCgV2ZCZb3S_UxU8bAhypnbWarjDk43JbQ
ENDTEXT
Thisform.olecontrol1.Navigate(m.url)
Messagebox("rightclick on map to save as image (png,jpg,bmp,gif...)",0+32+4096,'Save',2000)
Endproc
Procedure olecontrol1.Init
This.silent=.T.
Endproc
Procedure text1.Init
This.Value="33.677184"
Endproc
Procedure text2.Init
This.Value="1.010837"
Endproc
Procedure text3.Init
This.Value=14
Endproc
Procedure text4.Init
This.Value="600x400"
Endproc
Procedure combo1.Init
With This
.AddItem("satellite")
.AddItem("hybrid")
.AddItem("terrain")
.AddItem("roadmap")
.ListIndex=1
Style=2
Endwith
Endproc
Enddefine
*
*-- EndDefine: ymap
can use the previous code for any town if dont have (lat,long).Rightclick on the map and save as....
*Important:*the codes above are tested on visual foxpro 9 sp2-ie emulated as ie11 under windows 10 pro