We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Google Maps API C# Codebehind or Java Pass Variables?

pointeman
pointeman asked
on
Medium Priority
2,698 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

Digital Marketing (Hospitality)
CERTIFIED EXPERT
Commented:
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.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
David H.H.LeeDigital Marketing (Hospitality)
CERTIFIED EXPERT

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

Author

Commented:
I'll try the GMapDotNetControl and let you know .... thanks

Author

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...
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.