Solved

Google maps with VB NET and SQL Server

Posted on 2012-03-12
10
648 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Ransomware: The New Cyber Threat & How to Stop It

This infographic explains ransomware, type of malware that blocks access to your files or your systems and holds them hostage until a ransom is paid. It also examines the different types of ransomware and explains what you can do to thwart this sinister online threat.  

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have a large data set and a SSIS package. How can I load this file in multi threading?
When you see single cell contains number and text, and you have to get any date out of it seems like cracking our heads.
Via a live example combined with referencing Books Online, show some of the information that can be extracted from the Catalog Views in SQL Server.
This videos aims to give the viewer a basic demonstration of how a user can query current session information by using the SYS_CONTEXT function

680 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