Solved

Google maps with VB NET and SQL Server

Posted on 2012-03-12
10
605 Views
Last Modified: 2012-06-01
I've tried to get Google Map to work together with vb and getting data from a SQL-server. My solution works, but unfortunately not everywhere, so there is something wrong.

The code looks like this, master:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">  
    <% Response.Write(mapF())%>
</asp:Content>

And the code behind (without the SQL-part):
   Inherits System.Web.UI.Page
    Public Function mapF() As String
        Dim strmap As New StringBuilder("")
        strmap.Capacity = 2500
        Dim sLonWE, sLatNS As String
        Dim r, maxRow As Integer
        Dim mLat(10), mLon(10), mDescr(10), mLongDescr(10) As String
         mLat(0) = "55,48" : mLon(0) = "13,11" : mDescr(0) = "No 1" : mLongDescr(0) = "I am number 1"
        mLat(1) = "55,61" : mLon(1) = "13,17" : mDescr(1) = "No 2" : mLongDescr(1) = "I am number 2"
        mLat(2) = "55,62" : mLon(2) = "13,13" : mDescr(2) = "No 3" : mLongDescr(2) = "I am number 3"
        mLat(3) = "55,71" : mLon(3) = "13,14" : mDescr(3) = "No 4" : mLongDescr(3) = "I am number 4"
        maxRow = 3
        Try
            strmap.Append(" <!DOCTYPE html PUBLIC """"-//W3C//DTD XHTML 1.0 Strict//EN"""" """"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"">" + vbCrLf)
            strmap.Append(" <html xmlns=""http://www.w3.org/1999/xhtml"" ""lang=""en"">" + vbCrLf)
            strmap.Append(" <head>" + vbCrLf)
            strmap.Append(" <meta http-equiv=""Content-Type"" content=""Google maps via ASP.Net : text/html; charset=utf-8""/>" + vbCrLf)
            strmap.Append(" <title>5 - 5</title>" + vbCrLf)
            strmap.Append(" <link type=""text/css"" href=""css/style.css"" rel=""stylesheet"" media=""all"" />" + vbCrLf)
            strmap.Append(" <script type=""text/javascript"" src=""http://maps.google.com/maps/api/js?sensor=false""></script>" + vbCrLf)
            strmap.Append(" <script type=""text/javascript"">" + vbCrLf)
            strmap.Append(" (function() {" + vbCrLf)
            strmap.Append(" window.onload = function() {" + vbCrLf)
            ' Creating a reference to the mapDiv
            strmap.Append(" var mapDiv = document.getElementById('map');" + vbCrLf)
                ' Creating a latLng for the center of the map
            strmap.Append(" var latlng = new google.maps.LatLng(55.60, 13.11);" + vbCrLf)
                ' Creating an object literal containing the properties we want to pass to the map  "
            strmap.Append(" var options = {" + vbCrLf)
            strmap.Append("   center: latlng," + vbCrLf)
            strmap.Append("   zoom: 4," + vbCrLf)
            strmap.Append(" mapTypeId:  google.maps.MapTypeId.ROADMAP" + vbCrLf)
            strmap.Append("  };" + vbCrLf)
                '// Creating the map  
            strmap.Append(" var map = new google.maps.Map(document.getElementById('map'), options); " + vbCrLf)
                '// Creating a LatLngBounds object
            strmap.Append(" var bounds = new google.maps.LatLngBounds();   " + vbCrLf)
            strmap.Append("  var places = [];   " + vbCrLf)
            strmap.Append("  var jDescr = [];   " + vbCrLf)
            strmap.Append("  var jLongDescr = []; " + vbCrLf)
                '// Adding a LatLng object for each city
            For r = 0 To maxRow
                sLonWE = mLon(r).ToString : sLatNS = mLat(r).ToString
                sLonWE = Replace(sLonWE, ",", ".") : sLatNS = Replace(sLatNS, ",", ".")
                strmap.Append("  places.push(new google.maps.LatLng(" & sLatNS & "," & sLonWE & "));" + vbCrLf)
                strmap.Append("  jDescr[" & r & "] = '" & mDescr(r) & "';" + vbCrLf)
                strmap.Append("  jLongDescr[" & r & "] = '" & mLongDescr(r) & "';" + vbCrLf)
            Next
            ' // Creating a variable that will hold the InfoWindow object
            strmap.Append("  var infowindow; " + vbCrLf)
            ' // Creating the shadow
            strmap.Append(" var shadow = new google.maps.MarkerImage('../markers/shadow.png'); " + vbCrLf)
            '// Looping through the places array
            strmap.Append(" for (var r = 0; r < places.length; r++) {" + vbCrLf)
            '// Adding the markers
            strmap.Append(" var marker = new google.maps.Marker({" + vbCrLf)
            strmap.Append("  position: places[r], " + vbCrLf)
            strmap.Append("  map: map," + vbCrLf)
            strmap.Append(" title : jDescr[r], " + vbCrLf)
            strmap.Append(" icon : '../markers/green/marker' + (r+1) + '.png', " + vbCrLf)
            strmap.Append(" shadow: shadow " + vbCrLf)
            strmap.Append(" }); " + vbCrLf)
           '// Wrapping the event listener inside an anonymous function that we immediately invoke and passes the variable i to.
            strmap.Append(" (function(r, marker) {   " + vbCrLf)
            '// Creating the event listener. It now has access to the values of i and marker as they were during its creation
            strmap.Append(" google.maps.event.addListener(marker, 'click', function() {       " + vbCrLf)
                '// Check to see if we already have an InfoWindow  
            strmap.Append(" if (!infowindow) {" + vbCrLf)
            strmap.Append(" infowindow = new google.maps.InfoWindow();" + vbCrLf)
            strmap.Append("  }       " + vbCrLf)
                '// Setting the content of the InfoWindow
            strmap.Append(" infowindow.setContent( jLongDescr[r] );  " + vbCrLf)
                '// Tying the InfoWindow to the marker
            strmap.Append(" infowindow.open(map, marker);     " + vbCrLf)
            strmap.Append("  });  " + vbCrLf)
            strmap.Append("  })(r, marker);" + vbCrLf)
                '// Extending the bounds object with each LatLng
            strmap.Append(" bounds.extend(places[r]);" + vbCrLf)
            strmap.Append(" }" + vbCrLf)
                '// Adjusting the map to new bounding box
            strmap.Append("  map.fitBounds(bounds)" + vbCrLf)
            strmap.Append("  };" + vbCrLf)
            strmap.Append(" })();" + vbCrLf)
            strmap.Append(" </script>" + vbCrLf)
            strmap.Append(" </head>" + vbCrLf)
            strmap.Append(" <body  onload=""function()"">" + vbCrLf)
            strmap.Append("  <h1>Testing 2</h1>" + vbCrLf)
            strmap.Append(" <div id=""map"" style=""width: 900px; height: 600px""></div>" + vbCrLf)
            strmap.Append(" </body>" + vbCrLf)
            strmap.Append(" </html>" + vbCrLf)
        Catch ex As Exception
        End Try
        Return strmap.ToString
    End Function
0
Comment
Question by:janlars
  • 6
  • 2
10 Comments
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 37721838
Why are you writing the DOCTYPE, html and head elements?... I can see in your code that you are using MasterPages, and I suppose that the MasterPage already has the necessary code to present the DOCTYPE, html, and head elements... you should avoid those elements
0
 

Author Comment

by:janlars
ID: 37722042
Hi, thanks, good point, but unfortunately that wasn't enought. After deleting
strmap.Append(" <!DOCTYPE... until the row  strmap.Append(" <link type=""text/css... and the two rows strmap.Append(" </body>" + vbCrLf) and strmap.Append(" </html>" + vbCrLf) it's still working locally with IE but not Firefox.
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 37722292
Can you attach your HTML result?... so we can see where is the problem
0
 
LVL 15

Accepted Solution

by:
jorge_toriz earned 500 total points
ID: 37722294
I changed your code a little bit and it worked for me in IE and FireFox locally:

    Public Function mapF() As String
        Dim strmap As New StringBuilder("")
        strmap.Capacity = 2500
        Dim sLonWE, sLatNS As String
        Dim r, maxRow As Integer
        Dim mLat(10), mLon(10), mDescr(10), mLongDescr(10) As String
        mLat(0) = "55,48" : mLon(0) = "13,11" : mDescr(0) = "No 1" : mLongDescr(0) = "I am number 1"
        mLat(1) = "55,61" : mLon(1) = "13,17" : mDescr(1) = "No 2" : mLongDescr(1) = "I am number 2"
        mLat(2) = "55,62" : mLon(2) = "13,13" : mDescr(2) = "No 3" : mLongDescr(2) = "I am number 3"
        mLat(3) = "55,71" : mLon(3) = "13,14" : mDescr(3) = "No 4" : mLongDescr(3) = "I am number 4"
        maxRow = 3
        Try
            strmap.Append(" <script type=""text/javascript"" src=""http://maps.google.com/maps/api/js?sensor=false""></script>" + vbCrLf)
            strmap.Append(" <script type=""text/javascript"">" + vbCrLf)
            strmap.Append(" (function() {" + vbCrLf)
            strmap.Append(" window.onload = function() {" + vbCrLf)
            ' Creating a reference to the mapDiv
            strmap.Append(" var mapDiv = document.getElementById('map');" + vbCrLf)
            ' Creating a latLng for the center of the map
            strmap.Append(" var latlng = new google.maps.LatLng(55.60, 13.11);" + vbCrLf)
            ' Creating an object literal containing the properties we want to pass to the map  "
            strmap.Append(" var options = {" + vbCrLf)
            strmap.Append("   center: latlng," + vbCrLf)
            strmap.Append("   zoom: 4," + vbCrLf)
            strmap.Append(" mapTypeId:  google.maps.MapTypeId.ROADMAP" + vbCrLf)
            strmap.Append("  };" + vbCrLf)
            '// Creating the map  
            strmap.Append(" var map = new google.maps.Map(document.getElementById('map'), options); " + vbCrLf)
            '// Creating a LatLngBounds object
            strmap.Append(" var bounds = new google.maps.LatLngBounds();   " + vbCrLf)
            strmap.Append("  var places = [];   " + vbCrLf)
            strmap.Append("  var jDescr = [];   " + vbCrLf)
            strmap.Append("  var jLongDescr = []; " + vbCrLf)
            '// Adding a LatLng object for each city
            For r = 0 To maxRow
                sLonWE = mLon(r).ToString : sLatNS = mLat(r).ToString
                sLonWE = Replace(sLonWE, ",", ".") : sLatNS = Replace(sLatNS, ",", ".")
                strmap.Append("  places.push(new google.maps.LatLng(" & sLatNS & "," & sLonWE & "));" + vbCrLf)
                strmap.Append("  jDescr[" & r & "] = '" & mDescr(r) & "';" + vbCrLf)
                strmap.Append("  jLongDescr[" & r & "] = '" & mLongDescr(r) & "';" + vbCrLf)
            Next
            ' // Creating a variable that will hold the InfoWindow object
            strmap.Append("  var infowindow; " + vbCrLf)
            ' // Creating the shadow
            strmap.Append(" var shadow = new google.maps.MarkerImage('../markers/shadow.png'); " + vbCrLf)
            '// Looping through the places array
            strmap.Append(" for (var r = 0; r < places.length; r++) {" + vbCrLf)
            '// Adding the markers
            strmap.Append(" var marker = new google.maps.Marker({" + vbCrLf)
            strmap.Append("  position: places[r], " + vbCrLf)
            strmap.Append("  map: map," + vbCrLf)
            strmap.Append(" title : jDescr[r], " + vbCrLf)
            strmap.Append(" icon : '../markers/green/marker' + (r+1) + '.png', " + vbCrLf)
            strmap.Append(" shadow: shadow " + vbCrLf)
            strmap.Append(" }); " + vbCrLf)
            '// Wrapping the event listener inside an anonymous function that we immediately invoke and passes the variable i to.
            strmap.Append(" (function(r, marker) {   " + vbCrLf)
            '// Creating the event listener. It now has access to the values of i and marker as they were during its creation
            strmap.Append(" google.maps.event.addListener(marker, 'click', function() {       " + vbCrLf)
            '// Check to see if we already have an InfoWindow  
            strmap.Append(" if (!infowindow) {" + vbCrLf)
            strmap.Append(" infowindow = new google.maps.InfoWindow();" + vbCrLf)
            strmap.Append("  }       " + vbCrLf)
            '// Setting the content of the InfoWindow
            strmap.Append(" infowindow.setContent( jLongDescr[r] );  " + vbCrLf)
            '// Tying the InfoWindow to the marker
            strmap.Append(" infowindow.open(map, marker);     " + vbCrLf)
            strmap.Append("  });  " + vbCrLf)
            strmap.Append("  })(r, marker);" + vbCrLf)
            '// Extending the bounds object with each LatLng
            strmap.Append(" bounds.extend(places[r]);" + vbCrLf)
            strmap.Append(" }" + vbCrLf)
            '// Adjusting the map to new bounding box
            strmap.Append("  map.fitBounds(bounds)" + vbCrLf)
            strmap.Append("  };" + vbCrLf)
            strmap.Append(" })();" + vbCrLf)
            strmap.Append(" </script>" + vbCrLf)
            strmap.Append(" <h1>Testing 2</h1>" + vbCrLf)
            strmap.Append(" <div id=""map"" style=""width: 900px; height: 600px""></div>")
        Catch ex As Exception
        End Try
        Return strmap.ToString
    End Function
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 15

Expert Comment

by:jorge_toriz
ID: 37722308
I published my test on this site: http://www.jorgetoriz.com/janlars/ and runs fine in Mozilla and IE
0
 

Author Comment

by:janlars
ID: 37722500
jorge_toriz, perfect, it works for me as well, thanks a lot, I'm very happy...
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 37722542
Nice :)
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 37727279
Budy, the only thing that you are missing... is about set the question answered :p
0
 
LVL 19

Expert Comment

by:Amandeep Singh Bhullar
ID: 38035750
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Get up to 2TB FREE CLOUD per backup license!

An exclusive Black Friday offer just for Expert Exchange audience! Buy any of our top-rated backup solutions & get up to 2TB free cloud per system! Perform local & cloud backup in the same step, and restore instantly—anytime, anywhere. Grab this deal now before it disappears!

Join & Write a Comment

Suggested Solutions

Introduction In my previous article (http://www.experts-exchange.com/Microsoft/Development/MS-SQL-Server/SSIS/A_9150-Loading-XML-Using-SSIS.html) I showed you how the XML Source component can be used to load XML files into a SQL Server database, us…
For both online and offline retail, the cross-channel business is the most recent pattern in the B2C trade space.
Viewers will learn how to use the SELECT statement in SQL and will be exposed to the many uses the SELECT statement has.
Viewers will learn how to use the UPDATE and DELETE statements to change or remove existing data from their tables. Make a table: Update a specific column given a specific row using the UPDATE statement: Remove a set of values using the DELETE s…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now