Playing with google maps API

Published on by Yousfi Benameur

 
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.
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.
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.

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))
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))
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))
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))

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.
This code is used to get the position of any point(latitude,longitude) and to configure the mapcity javascript variable in code.

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

 

Playing with google maps API
Playing with google maps API
Playing with google maps API
 
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


Playing with google maps API

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.

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....

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

To be informed of the latest articles, subscribe:
Comment on this post
J
Great job!<br /> http://google.com
Reply
T
Wow! Keep them flow, Yousfi. You are doing a great job.
Reply