Using Google Maps API with ASP.NET

Last post 01-14-2010 4:38 AM by rajuranjan131. 17 replies.

Sort Posts:

  • Using Google Maps API with ASP.NET

    12-19-2008, 3:33 PM
    • Member
      point Member
    • D1gital Ice
    • Member since 12-19-2008, 8:30 PM
    • Posts 9

    I am new to ASP.NET development, and have been trying to teach myself how to use it.

    I am working on embedding the Google Maps API inside of my web project. So far I have the map displayed, centered on the location with the InfoWindow showing up.

    My question is, is it possible to use ASP.NET server controls to interact with the javascript function GDirections.load() from the google maps API?

    What I want is a way for people to enter their address into the ASP.NET control, click the Go! button and have it return the map with the directions and the text based directions below. The Google Maps API already provides a function in Javascript to submit a query to their engine (GDirections.load()), however I am not sure how to interact with that using ASP.NET controls.

    I am using code behind model in C#.

    Thanks!

  • Re: Using Google Maps API with ASP.NET

    12-19-2008, 3:44 PM
    • Contributor
      3,477 point Contributor
    • tfsmag
    • Member since 01-06-2006, 5:58 PM
    • Danville, Illinois
    • Posts 686
    if you google asp.net google maps control you'll get a few links to pre-built asp.net controls that let you tap into the google maps API. If you're new I'd suggest going that route to meet your requirements. Here's a link to one of the controls.
    ------------------------------------------------
    Jeff Turner

    Don't forget to mark the correct answer for your
    question to help out future visitors!
  • Re: Using Google Maps API with ASP.NET

    12-19-2008, 4:53 PM
    • Member
      point Member
    • D1gital Ice
    • Member since 12-19-2008, 8:30 PM
    • Posts 9
    I will look into that. I was kind of hoping I would not have to download a control from someone else, rather just add a very very basic server control that would run the GDirections.load() function from Javascript.
  • Re: Using Google Maps API with ASP.NET

    12-21-2008, 11:44 AM
    • Member
      point Member
    • D1gital Ice
    • Member since 12-19-2008, 8:30 PM
    • Posts 9

    All I need is a simple way for someone to put in their address and have Google Maps display the route and the directions. I have completely given up on ASP.NET, it is impossible to learn by reading books. Google provides this functionality in their API with the call to GDirections, which is a Javascript function.

    If anyone has a solution to my problem, please post it. Thank you.

  • Re: Using Google Maps API with ASP.NET

    12-23-2008, 1:48 AM
    Answer

    Hi,

    Please check following links:

    google maps API

    http://forums.asp.net/p/1223638/2256307.aspx#2256307

    Google Map API and ASP.NET / C# - Looking For Script / Source

    http://forums.asp.net/p/1202602/2097100.aspx#2097100

    Let me know whether that answers your question, or if I've missed something.

    Best Regards,
    Bober Song
    --------------------------------
    Please remember to click “Mark as Answer” on the post that helps you
  • Re: Using Google Maps API with ASP.NET

    12-30-2008, 1:20 PM
    • Member
      point Member
    • D1gital Ice
    • Member since 12-19-2008, 8:30 PM
    • Posts 9

     Thanks for the posts guys. I took a break from it for the past week or so and have not progressed at all. I picked up a copy of ASP.NET 3.5 for dummies, a javascript book, another ASP.NET 2.0 book, and a C# with XML 2008 book. So far I have learned absolutely nothing from any of those books.

     Here is what I need. I need to be able to create a button and text box like so:  

    <asp:TextBox ID="addressinput" runat="server"></asp:TextBox>
    <asp:Button ID="gobutton" runat="server" Text="Go!" />

    From there, the OnClick attribute for that button needs to call a Javascript function in my GMaps.js file.

    Is it possible to have the onclick event of an ASP.NET button call a Javascript function?

    Also, that Javascript function will need to reference addressinput.Text to assign the directions string. I think it just comes down to client side and server side working together somehow. Any ideas?

  • Re: Using Google Maps API with ASP.NET

    12-30-2008, 4:46 PM
    • Contributor
      3,477 point Contributor
    • tfsmag
    • Member since 01-06-2006, 5:58 PM
    • Danville, Illinois
    • Posts 686

     It is possible to call a javascript function on an asp.net button click. The asp.net button has an onclientclick property that acts exactly like a regular html button onclick property. As for getting the text of the address input, you can simply refer to the client id attribute in your js code.

     

    var address = document.getElementById("<%=addressinput.clientid%>").value;

     

    would get you the value of the address textbox via js.

    ------------------------------------------------
    Jeff Turner

    Don't forget to mark the correct answer for your
    question to help out future visitors!
  • Re: Using Google Maps API with ASP.NET

    12-30-2008, 6:23 PM
    • Member
      point Member
    • D1gital Ice
    • Member since 12-19-2008, 8:30 PM
    • Posts 9

    Ok, now I understand. Another issue just came up. It seems that my map keeps getting reset to default when the user clicks the button.

    My body tag has a onLoad attribute, which calls the initialize() function from my Javascript. In there, the map is created and the center point is set with GMaps API. When the user clicks an ASP.NET button, is it going to post-back and then re-load that initialize function? If that is the case, then I will never get the results I need because it is being reset.

     

    Thanks

     

    EDIT: Here is the code I have so far, maybe someone could take a look at it and give me a suggestion. Here is the HTML.

     

    <body onload="initialize()" onunload="GUnload()">
    <form id="maps" runat="server">
    <!-- Main Content -->
    <div id="main">
    <h1 id="title"> Directions to Crystal Ridge </h1>
    <br />
    <br />
    <div id="map_canvas"></div>
    <div id="inputcontrol">
    <br />
    <span class="normaltext">Enter your address for directions to Crystal Ridge</span>
    <br />
    <asp:TextBox ID="addressinput" runat="server"></asp:TextBox>
    <asp:Button ID="gobutton" runat="server" Text="Go!" OnClientClick="goDirections()" />
    </div>
    <div id="directions"></div>
    </div>
    </form>
    </body>

     Here is the Javascript Code.

      

    var map; // Map Object
    var directionsPanel; // Panel for Directions Text
    var directions; // Map overlay directions

    // Initialize the map function

    function initialize() {
    if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas")); // create the map
    map.setCenter(new GLatLng(42.920477, -88.009707), 13); // set the center
    map.addControl(new GLargeMapControl()); // add the zoom and pan controls

    // Create Marker for Ski Hill

    var hill = new GMarker(new GLatLng(42.920477, -88.009707));
    var markertext = '<span class="btitle"&gt;Crystal Ridge</span>' + '<br />' +
    '<span>7900 W Crystal Ridge Dr</span>' + '<br />' + '<span class="baddress"&gt;Frankin, WI 53132</span>';
    map.addOverlay(hill);
    hill.openInfoWindowHtml(markertext); // Crystal Ridge Text Bubble

    //Add Directions Module

    directionsPanel = document.getElementById("directions"); // create the directions panel
    directions = new GDirections(map, directionsPanel); // make a new directions object
    }
    }

    function goDirections() {
    var addresses; // full address string
    var fromAddress; // the from address
    fromAddress = document.getElementById("&lt;%=addressinput.clientid%>").value; // use textbox text as from address
    addresses = 'from: ' + fromAddress + ' to: 7900 W Crystal Ridge Dr, Franklin, WI'; // create the full string
    directions.load(addresses); // load the directions
    }
     

     

  • Re: Using Google Maps API with ASP.NET

    12-30-2008, 7:39 PM
    • Contributor
      4,611 point Contributor
    • Nemesis116
    • Member since 09-25-2008, 6:09 AM
    • Geel
    • Posts 919

    Clicking the button causes a postback, which will reload your whole page.

    In the goDirections() method, you should add return false; in the end.

    This will prevent the button from doing a postback. Hope it helps!

    Jef Claes
    ~~~~~~~~~~


    Visit my blog
    Let's Twit!
  • Re: Using Google Maps API with ASP.NET

    12-30-2008, 10:35 PM
    • Member
      point Member
    • D1gital Ice
    • Member since 12-19-2008, 8:30 PM
    • Posts 9

    Adding a return false did not do anything. Thanks for the answer though.

    Any other ideas guys? I am really anxious to get this up and running.

  • Re: Using Google Maps API with ASP.NET

    12-31-2008, 7:02 AM
    • Contributor
      4,611 point Contributor
    • Nemesis116
    • Member since 09-25-2008, 6:09 AM
    • Geel
    • Posts 919
    That's weird. Is the Button still doing a PostBack?
    Jef Claes
    ~~~~~~~~~~


    Visit my blog
    Let's Twit!
  • Re: Using Google Maps API with ASP.NET

    12-31-2008, 9:43 AM
    • Member
      point Member
    • D1gital Ice
    • Member since 12-19-2008, 8:30 PM
    • Posts 9
    I think so, but I am not sure. This is my first exposure to ASP.NET, so I am still learning it. I understand the concept of post-back, but not in detail.
  • Re: Using Google Maps API with ASP.NET

    12-31-2008, 10:58 AM
    • Member
      132 point Member
    • safzal1212
    • Member since 02-22-2008, 8:16 PM
    • Posts 80

    Remove the method call from the body of your page

    <body onload="initialize()" onunload="GUnload()">

    and instead add the follwing  into Page_load event in code behind. 

    If Not Page.IsPostBack Then

    form1.Attributes.Add("onLoad", "initialize()")

    End If

  • Re: Using Google Maps API with ASP.NET

    12-31-2008, 12:06 PM
    • Member
      point Member
    • D1gital Ice
    • Member since 12-19-2008, 8:30 PM
    • Posts 9
    That makes sense, but now the map won't even load in the page. I believe the initialize map function has to be a part of the body tag. Is there a way to add attributes to the body tag with that same code? When a post back occurs, will it still have the contents of the map there even though it will not run the initialize function?
  • Re: Using Google Maps API with ASP.NET

    01-02-2009, 11:48 AM
    • Member
      point Member
    • D1gital Ice
    • Member since 12-19-2008, 8:30 PM
    • Posts 9

    Would using AJAX for partial page updates work? All that needs to be updated on a post-back is the map object itself and the directions panel divider.

     Also, where could I put my initialize() function other than the body tag so that it wouldn't reset?

     

    EDIT: I really need to get this up and running. I have browsed through at least 6 ASP.NET books and have learned absolutely nothing about the technology. I have a strong C++ background, yet I still cannot understand the concept of ASP.NET. I am good with CSS and XHTML as well. 

     My question is: Where can I go to learn ASP.NET and how to make my maps application with the Google Maps API? That is all I am asking.

Page 1 of 2 (18 items) 1 2 Next >