What's new

[VB] Google Maps API

  • Thread starter Chris7S
  • Start date
  • Views 6,229
Chris7S

InModWeTrust360

Nerd by definition, programmer by trade
Grammar Nazi Chatty Kathy Seasoned Veteran
Messages
1,507
Reaction score
490
Steps to Create Google Maps
Create a New Project​
Resize and Customize the Form to Your Liking​
Double Click the Form to Open the Code and Click CTRL+A Then Paste The Code Below​


Code:
Public Class Form1
Private GoogleControl1 As GoogleControl

Sub New()
InitializeComponent()
GoogleControl1 = New GoogleControl
GoogleControl1.Dock = DockStyle.Fill
Me.Controls.Add(GoogleControl1)
End Sub
End Class
<System.Runtime.InteropServices.ComVisibleAttribute(True)> _
Public Class GoogleControl : Inherits UserControl

Private WebBrowser1 As WebBrowser
Private StatusStrip1 As StatusStrip
Private StatusButtonDelete As ToolStripButton
Private StatusLabelLatLng As ToolStripStatusLabel

Private InitialZoom As Integer
Private InitialLatitude As Double
Private InitialLongitude As Double
Private InitialMapType As GoogleMapType

Public Enum GoogleMapType
None
RoadMap
Terrain
Hybrid
Satellite
End Enum

Sub New()
MyBase.New()

WebBrowser1 = New WebBrowser
StatusStrip1 = New StatusStrip
StatusButtonDelete = New ToolStripButton
StatusLabelLatLng = New ToolStripStatusLabel

WebBrowser1.Dock = DockStyle.Fill
WebBrowser1.AllowWebBrowserDrop = False
WebBrowser1.IsWebBrowserContextMenuEnabled = False
WebBrowser1.WebBrowserShortcutsEnabled = False
WebBrowser1.ObjectForScripting = Me
WebBrowser1.ScriptErrorsSuppressed = True
AddHandler WebBrowser1.DocumentCompleted, AddressOf WebBrowser1_DocumentCompleted

StatusStrip1.Dock = DockStyle.Bottom
StatusStrip1.Items.Add(StatusButtonDelete)
StatusStrip1.Items.Add(StatusLabelLatLng)

StatusButtonDelete.Text = "Delete Markers"
AddHandler StatusButtonDelete.Click, AddressOf StatusButtonDelete_Click

Me.Controls.Add(WebBrowser1)
Me.Controls.Add(StatusStrip1)

InitialZoom = 4
InitialLatitude = 38
InitialLongitude = -96.5
InitialMapType = GoogleMapType.RoadMap
End Sub

Sub New(ByVal zoom As Integer, ByVal lat As Double, ByVal lng As Double, ByVal mapType As GoogleMapType)
Me.New()
InitialZoom = zoom
InitialLatitude = lat
InitialLongitude = lng
InitialMapType = mapType
End Sub

Private Sub GoogleControl_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
WebBrowser1.DocumentText = My.Computer.FileSystem.ReadAllText("GoogleMap.htm")
End Sub

Private Sub WebBrowser1_DocumentCompleted(ByVal sender As Object, ByVal e As System.Windows.Forms.WebBrowserDocumentCompletedEventArgs)
WebBrowser1.Document.InvokeScript("Initialize", New Object() {InitialZoom, InitialLatitude, InitialLongitude, CInt(InitialMapType)})
End Sub

Public Sub Map_MouseMove(ByVal lat As Double, ByVal lng As Double)
StatusLabelLatLng.Text = "|   Latitude/Longitude: " & CStr(Math.Round(lat, 4)) & " , " & CStr(Math.Round(lng, 4))
End Sub

Public Sub Map_Click(ByVal lat As Double, ByVal lng As Double)
Dim MarkerName As String = InputBox("Enter a Marker Name", "New Marker")

If Not String.IsNullOrEmpty(MarkerName) Then
WebBrowser1.Document.InvokeScript("AddMarker", New Object() {MarkerName, lat, lng})
End If
End Sub

Private Sub StatusButtonDelete_Click(ByVal sender As Object, ByVal e As EventArgs)
WebBrowser1.Document.InvokeScript("DeleteMarkers")
End Sub
End Class
Once you have that code added to your form, you need to open Notepad (Run as Admin) and paste the following text into the text document:​


Code:
<!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: 0;
padding: 0;
}
#map_canvas
{
height: 100%;
}
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>

<script type="text/javascript">  

var map;
var Markers = [];

function Initialize(zoomLevel,lat,lng,type){  
//Get the type of map to start.
//Need to convert the GoogleMapType enum
//to an actual Google Map Type
var MapType;
switch (type)
{
case 1:
MapType = google.maps.MapTypeId.ROADMAP;
break;
case 2:
MapType = google.maps.MapTypeId.TERRAIN;
break;
case 3:
MapType = google.maps.MapTypeId.HYBRID;
break;
case 4:
MapType = google.maps.MapTypeId.SATELLITE;
break;
default:
MapType = google.maps.MapTypeId.ROADMAP;
};

//Create an instance of the map with the lat, lng, zoom, and
//type passed in
var myLatlng = new google.maps.LatLng(lat,lng);  
var myOptions = {zoom: zoomLevel,center: myLatlng,mapTypeId: MapType};
var MarkerSize = new google.maps.Size(48,48);

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);	
google.maps.event.addListener(map, 'click', Map_Click);
google.maps.event.addListener(map, 'mousemove', Map_MouseMove);
google.maps.event.addListener(map, 'idle',Map_Idle);

}  

function Map_Click(e){
window.external.Map_Click(e.latLng.lat(),e.latLng.lng());
}

function Map_MouseMove(e){
window.external.Map_MouseMove(e.latLng.lat(),e.latLng.lng());
}

function Map_Idle(){
window.external.Map_Idle();
}


function DeleteMarkers()
{
if (Markers){
for (i in Markers){
Markers[i].setMap(null);
google.maps.event.clearInstanceListeners(Markers[i]);
Markers[i] = null;
}
Markers.length = 0;
}
}


function AddMarker(name,lat,lng)
{
var MarkerLatLng = new google.maps.LatLng(lat, lng);	
var MarkerOption = {map:map,position:MarkerLatLng,title:name};
var Marker = new google.maps.Marker(MarkerOption);
Markers.push(Marker);
MarkerLatLng = null;
MarkerOption = null;
}

</script>

</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
Once you have this pasted into the Notepad document, go to File>Save As>GoogleMap.htm.​
Make sure you click All Files as the filter before saving.​
Now that you have the HTM file created, you need to go back into VB and look to the right at the Solution Explorer.​
Right click on the Main VB File, it should be the top item there.​
Next, click Add and then click Add Existing Item.​
Now, you need to browse for where you saved the HTM file and import it into your project.​
Then you need to click on the HTM file and look in the Properties box and find "Copy to Output Directory." Change "Do not copy" to "Copy if newer."​
After all those long steps, you should be done!
tongue.png
Hope you guys enjoy your Google Maps!​
 
K

Kalayde

Newbie
Messages
1
Reaction score
0
Steps to Create Google Maps
Create a New Project​
Resize and Customize the Form to Your Liking​
Double Click the Form to Open the Code and Click CTRL+A Then Paste The Code Below​


Code:
Public Class Form1
Private GoogleControl1 As GoogleControl
 
Sub New()
InitializeComponent()
GoogleControl1 = New GoogleControl
GoogleControl1.Dock = DockStyle.Fill
Me.Controls.Add(GoogleControl1)
End Sub
End Class
<System.Runtime.InteropServices.ComVisibleAttribute(True)> _
Public Class GoogleControl : Inherits UserControl
 
Private WebBrowser1 As WebBrowser
Private StatusStrip1 As StatusStrip
Private StatusButtonDelete As ToolStripButton
Private StatusLabelLatLng As ToolStripStatusLabel
 
Private InitialZoom As Integer
Private InitialLatitude As Double
Private InitialLongitude As Double
Private InitialMapType As GoogleMapType
 
Public Enum GoogleMapType
None
RoadMap
Terrain
Hybrid
Satellite
End Enum
 
Sub New()
MyBase.New()
 
WebBrowser1 = New WebBrowser
StatusStrip1 = New StatusStrip
StatusButtonDelete = New ToolStripButton
StatusLabelLatLng = New ToolStripStatusLabel
 
WebBrowser1.Dock = DockStyle.Fill
WebBrowser1.AllowWebBrowserDrop = False
WebBrowser1.IsWebBrowserContextMenuEnabled = False
WebBrowser1.WebBrowserShortcutsEnabled = False
WebBrowser1.ObjectForScripting = Me
WebBrowser1.ScriptErrorsSuppressed = True
AddHandler WebBrowser1.DocumentCompleted, AddressOf WebBrowser1_DocumentCompleted
 
StatusStrip1.Dock = DockStyle.Bottom
StatusStrip1.Items.Add(StatusButtonDelete)
StatusStrip1.Items.Add(StatusLabelLatLng)
 
StatusButtonDelete.Text = "Delete Markers"
AddHandler StatusButtonDelete.Click, AddressOf StatusButtonDelete_Click
 
Me.Controls.Add(WebBrowser1)
Me.Controls.Add(StatusStrip1)
 
InitialZoom = 4
InitialLatitude = 38
InitialLongitude = -96.5
InitialMapType = GoogleMapType.RoadMap
End Sub
 
Sub New(ByVal zoom As Integer, ByVal lat As Double, ByVal lng As Double, ByVal mapType As GoogleMapType)
Me.New()
InitialZoom = zoom
InitialLatitude = lat
InitialLongitude = lng
InitialMapType = mapType
End Sub
 
Private Sub GoogleControl_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
WebBrowser1.DocumentText = My.Computer.FileSystem.ReadAllText("GoogleMap.htm")
End Sub
 
Private Sub WebBrowser1_DocumentCompleted(ByVal sender As Object, ByVal e As System.Windows.Forms.WebBrowserDocumentCompletedEventArgs)
WebBrowser1.Document.InvokeScript("Initialize", New Object() {InitialZoom, InitialLatitude, InitialLongitude, CInt(InitialMapType)})
End Sub
 
Public Sub Map_MouseMove(ByVal lat As Double, ByVal lng As Double)
StatusLabelLatLng.Text = "|  Latitude/Longitude: " & CStr(Math.Round(lat, 4)) & " , " & CStr(Math.Round(lng, 4))
End Sub
 
Public Sub Map_Click(ByVal lat As Double, ByVal lng As Double)
Dim MarkerName As String = InputBox("Enter a Marker Name", "New Marker")
 
If Not String.IsNullOrEmpty(MarkerName) Then
WebBrowser1.Document.InvokeScript("AddMarker", New Object() {MarkerName, lat, lng})
End If
End Sub
 
Private Sub StatusButtonDelete_Click(ByVal sender As Object, ByVal e As EventArgs)
WebBrowser1.Document.InvokeScript("DeleteMarkers")
End Sub
End Class
Once you have that code added to your form, you need to open Notepad (Run as Admin) and paste the following text into the text document:​


Code:
<!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: 0;
padding: 0;
}
#map_canvas
{
height: 100%;
}
</style>
 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
 
<script type="text/javascript"> 
 
var map;
var Markers = [];
 
function Initialize(zoomLevel,lat,lng,type){ 
//Get the type of map to start.
//Need to convert the GoogleMapType enum
//to an actual Google Map Type
var MapType;
switch (type)
{
case 1:
MapType = google.maps.MapTypeId.ROADMAP;
break;
case 2:
MapType = google.maps.MapTypeId.TERRAIN;
break;
case 3:
MapType = google.maps.MapTypeId.HYBRID;
break;
case 4:
MapType = google.maps.MapTypeId.SATELLITE;
break;
default:
MapType = google.maps.MapTypeId.ROADMAP;
};
 
//Create an instance of the map with the lat, lng, zoom, and
//type passed in
var myLatlng = new google.maps.LatLng(lat,lng); 
var myOptions = {zoom: zoomLevel,center: myLatlng,mapTypeId: MapType};
var MarkerSize = new google.maps.Size(48,48);
 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', Map_Click);
google.maps.event.addListener(map, 'mousemove', Map_MouseMove);
google.maps.event.addListener(map, 'idle',Map_Idle);
 
} 
 
function Map_Click(e){
window.external.Map_Click(e.latLng.lat(),e.latLng.lng());
}
 
function Map_MouseMove(e){
window.external.Map_MouseMove(e.latLng.lat(),e.latLng.lng());
}
 
function Map_Idle(){
window.external.Map_Idle();
}
 
 
function DeleteMarkers()
{
if (Markers){
for (i in Markers){
Markers[i].setMap(null);
google.maps.event.clearInstanceListeners(Markers[i]);
Markers[i] = null;
}
Markers.length = 0;
}
}
 
 
function AddMarker(name,lat,lng)
{
var MarkerLatLng = new google.maps.LatLng(lat, lng);
var MarkerOption = {map:map,position:MarkerLatLng,title:name};
var Marker = new google.maps.Marker(MarkerOption);
Markers.push(Marker);
MarkerLatLng = null;
MarkerOption = null;
}
 
</script>
 
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
Once you have this pasted into the Notepad document, go to File>Save As>GoogleMap.htm.​
Make sure you click All Files as the filter before saving.​
Now that you have the HTM file created, you need to go back into VB and look to the right at the Solution Explorer.​
Right click on the Main VB File, it should be the top item there.​
Next, click Add and then click Add Existing Item.​
Now, you need to browse for where you saved the HTM file and import it into your project.​
Then you need to click on the HTM file and look in the Properties box and find "Copy to Output Directory." Change "Do not copy" to "Copy if newer."​
After all those long steps, you should be done!
tongue.png
Hope you guys enjoy your Google Maps!​


can you make a custom search button in the form?im having a hard time tryin though
 
Archdeacon

Archdeacon

Newbie
Messages
1
Reaction score
1
can you make a custom search button in the form?im having a hard time tryin though
I have made considerable mods to this, including a New Location button with drop-down ComboBox to pick up stored locations from a txt file and a roving Pan button that goes to a new location and adds a named marker there.
Can I give credit to the author of this template so that I can distribute (free, of course) this version, which I can post here if there is interest?
 
GoldBl4d3

GoldBl4d3

VIP
VIP
Retired
Programmer Mythical Veteran Legendary Veteran
Messages
3,789
Reaction score
1,446
Cool, nice job bro!


K Kalayde :

Cmon, dont quote the god damn thread post. GEEZ I cant stand when people do that.
 
Top Bottom