We help IT Professionals succeed at work.

Google maps with VB NET and SQL Server

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
Comment
Watch Question

jorge_torizResearch & Development Manager

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

Author

Commented:
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.
jorge_torizResearch & Development Manager

Commented:
Can you attach your HTML result?... so we can see where is the problem
Research & Development Manager
Commented:
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
jorge_torizResearch & Development Manager

Commented:
I published my test on this site: http://www.jorgetoriz.com/janlars/ and runs fine in Mozilla and IE

Author

Commented:
jorge_toriz, perfect, it works for me as well, thanks a lot, I'm very happy...
jorge_torizResearch & Development Manager

Commented:
Nice :)
jorge_torizResearch & Development Manager

Commented:
Budy, the only thing that you are missing... is about set the question answered :p
CERTIFIED EXPERT

Commented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.