• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2533
  • Last Modified:

Google Maps API C# Codebehind or Java Pass Variables?

I have the follow simple code for an .html Google map, but I program .aspx pages. Also need to pass several variables to the script somehow from a database.

Q. Is Google Maps API stictly Javascript?

Q. Is there a way to codebehind the Javascript?

Q. How do I pass dynamic coords to the Javascript or codebehind?


 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABCDEFG"
      type="text/javascript"></script>
  </head>
<body onunload="GUnload()">
 
    <!-- you can use tables or divs for the overall layout -->
 
    <table border="1">
      <tr>
        <td>
           <div id="map" style="width: 500px; height: 400px"></div>
        </td>
        <td width="150" valign="top" style="text-decoration: underline; color: #4444ff;">
           <div id="side_bar"></div>
        </td>
      </tr>
 
    </table>
    <script type="text/javascript">
 
        if (GBrowserIsCompatible()) {
 
            // this variable will collect the html which will eventually be placed
            // in the side_bar
            var side_bar_html = "";
 
            // arrays to hold copies of the markers and html used by the side_bar
            // because the function closure trick doesnt work there
            var gmarkers = [];
            var i = 0;
 
            var lastlinkid;
 
 
            // A function to create the marker and set up the event window
            function createMarker(point, name, html) {
                var marker = new GMarker(point);
                var linkid = "link" + i;
                GEvent.addListener(marker, "click", function() {
                    marker.openInfoWindowHtml(html);
                    document.getElementById(linkid).style.background = "#ffff00";
                    lastlinkid = linkid;
                });
                // save the info we need to use later for the side_bar
                gmarkers[i] = marker;
                // add a line to the side_bar html
                side_bar_html += '<div id="' + linkid + '"><a href="javascript:Linkclicked(' + i + ')">'
           + name + '</a><br></div>';
                i++;
                return marker;
            }
 
 
            // This function picks up the click and opens the corresponding info window
            function Linkclicked(i) {
                GEvent.trigger(gmarkers[i], "click");
            }
 
 
            // create the map
            var map = new GMap2(document.getElementById("map"));
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(43.907787, -79.359741), 8);
            var mm = new GMarkerManager(map);
 
            // add the points    
            var point = new GLatLng(43.65654, -79.90138);
            var marker = createMarker(point, "This place", "This is The First Info")
 
            var point = new GLatLng(43.91892, -78.89231);
            var marker = createMarker(point, "That place", "This is The Second Info")
 
            var point = new GLatLng(43.82589, -78.89231);
            var marker = createMarker(point, "The other place", "This is The Third Info")
 
            GEvent.addListener(map, "infowindowclose", function() {
                document.getElementById(lastlinkid).style.background = "#ffffff";
            });
 
            mm.addMarkers(gmarkers, 0, 17);
            mm.refresh();
 
            // put the assembled side_bar_html contents into the side_bar div
            document.getElementById("side_bar").innerHTML = side_bar_html;
 
        }
 
        else {
            alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    </script>
  </body>
 
</html>

Open in new window

0
pointeman
Asked:
pointeman
  • 2
  • 2
1 Solution
 
David H.H.LeeCommented:
Hi pointeman,
You can use Google map .net control to resolve the entire problems that you've raised up here.
http://www.codeproject.com/KB/custom-controls/LatLaysFlat-Part1.aspx

Alternative control : GMapDotNetControl
http://sourceforge.net/projects/gmapdotnetctl/

If you want to build your own custom control using the existing Google map html source code that mentioned above, you need to build everything from the scratch. I've come across with similiar question before, you can check it here regarding how you can pass the variables from database to google map HTML source code dynamically. It is written in vb.net format. You can convert it to C# format based on your live situation.
Hope that helps.
0
 
David H.H.LeeCommented:
This is PAQ that i mentioned (as a starter for your question):
http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_23891990.html
0
 
pointemanAuthor Commented:
I'll try the GMapDotNetControl and let you know .... thanks
0
 
pointemanAuthor Commented:
I downloaded the GMapDotNetControl and opened it in both VS2005 and VS2008, but I only see a large gray area on default.aspx page when trying to run the project...
0

Featured Post

Technology Partners: 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!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now