Solved

Modify C# Code

Posted on 2008-10-31
21
311 Views
Last Modified: 2009-02-12
Please modify this code to use latitude and longitude (which I will supply from the database) instead of using postcode.
// ucGoogleMap.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucGoogleMap.ascx.cs" Inherits="JS_ucGoogleMap" %>

 

<script src="http://maps.google.com/maps?file=api&v=2&key=YOURKEY"

    type="text/javascript"></script>

 

<script src="http://www.google.com/jsapi?key=YourKEY"

    type="text/javascript"></script>

 

<script type="text/javascript">google.load("search", "1");</script>

 

<%--<div style="width: 250px; height: 200px; border: 1px solid #E25827;" id="Location"></div>--%>

<div style="width: <%=this.Width+"px"%>; height: <%=this.Height+"px"%>; border: 1px solid #E25827;" id="<%=this.ID%>"></div>

 

<script type="text/javascript">

 

//document.write('<div style="width: 250px; position:relative; height: 200px; border: 1px solid #E25827;" id="'+'<%=this.ID%>'+'">');

 

</script>

 

<script type="text/javascript">

			var Search_<%=this.ID%> = new GlocalSearch();

			//Search.setSearchCompleteCallback(null,CallBack);

			Search_<%=this.ID%>.setSearchCompleteCallback(null,CallBack_<%=this.ID%>);

			//Search.execute("E12 6LL, UK");

			alert('<%=this.Postcode%>');

			Search_<%=this.ID%>.execute( "\""+'<%=this.Postcode%>'+", UK");

 

           //function CallBack()

			function CallBack_<%=this.ID%>()

			{

			var s = Search_<%=this.ID%>;

			if (s.results[0]) {

			var resultLat = s.results[0].lat;

			var resultLng = s.results[0].lng;

			var point = new GLatLng(resultLat,resultLng);

           

           //var map = new GMap2(document.getElementById('Location'));

			var map = new GMap2(document.getElementById('<%=this.ID%>'));

			map.setCenter(point, 13);

			map.addControl(new GSmallMapControl());

			map.addOverlay(new GMarker(point));

			}else{

			alert("Postcode Not Found!");

			}

			}

</script>

 

//=====================================================

//ucGoogleMap.ascx.cs

using System;

 

public partial class JS_ucGoogleMap : System.Web.UI.UserControl

{

    public string Postcode

    {

        get { return (string)(ViewState["Postcode"] ?? ""); }

        set { ViewState["Postcode"] = value; }

    }

    public string Width

    {

        get { return (string)(ViewState["Width"] ?? "400"); }

        set { ViewState["Width"] = value; }

    }

    public string Height

    {

        get { return (string)(ViewState["Height"] ?? "300"); }

        set { ViewState["Height"] = value; }

    }

    protected void Page_Load(object sender, EventArgs e)

    {

        

    }

}

//===========================================

//MapTest.aspx

<%@ Register src="ucGoogleMap.ascx" tagname="ucGoogleMap" tagprefix="uc1" %>

 

 

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

 

    <uc1:ucGoogleMap ID="ucGoogleMap1" Width="100" Height="200" Postcode="e126ll" runat="server" />

    <uc1:ucGoogleMap ID="ucGoogleMap2"  Postcode="ha3 0bu" runat="server" />

 

</asp:Content>

Open in new window

0
Comment
Question by:azyet24
  • 10
  • 9
21 Comments
 
LVL 8

Expert Comment

by:MrAgile
ID: 22871396
Hi There,

I have attached a complete example. All you need too do is replace some of the data with your own and then call the function using  the body onload event.

Sean
 function load() {
 

      if (GBrowserIsCompatible()) { 

      

      

       function createMarker(point,html) {

        // ======== Add a "directions" link ======

        html += '<br> <a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions to mystore: <%= StoreName %></a>';

      

        //var letter = String.fromCharCode("A".charCodeAt(0) + "a");

        var letteredIcon = new GIcon(G_DEFAULT_ICON);

        letteredIcon.image = "http://xxx.xxx.xxx.xxx/images/r.png";

        letteredIcon.iconSize = new GSize(56, 58);

        letteredIcon.shadowSize = new GSize(58, 60);

        letteredIcon.iconAnchor = new GPoint(27, 34);

        letteredIcon.infoWindowAnchor = new GPoint(9, 2);

        // Set up our GMarkerOptions object

        markerOptions = { icon:letteredIcon };

        var marker = new GMarker(point, markerOptions);
 

        GEvent.addListener(marker, "click", function() {

        marker.openInfoWindowHtml(html);

        });

        return marker;

        }
 
 

      var map = new GMap2(document.getElementById("map"));

      map.addControl(new GLargeMapControl());

      map.addControl(new GMapTypeControl());

      map.setCenter(new GLatLng('<%= Longitude %>','<%= Latitude %>'),15);

    

      var point = new GLatLng('<%= Longitude %>','<%= Latitude %>');

      var marker = createMarker(point,'<div style="width:240px">Mystore:');

      map.addOverlay(marker);

       map.openInfoWindowHtml(map.getCenter(),'<div style="width:240px"> <a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions to mystore: <%= StoreName %></a>');

      

    }

}

Open in new window

0
 

Author Comment

by:azyet24
ID: 22872807
MrAgile,

Thank you for your reply.  I don't undertand your code though.  First, I need this in vb.net.  Secondly, it looks like you are providing a link that then goes out to google to get the lat/long.  I already have the lat/long and do not need a link to build the map.  I simply need to assign the lat/long at run time and have the map appear correctly.  Can you assist with this?
0
 
LVL 8

Expert Comment

by:MrAgile
ID: 22872865
Hi There,

The code is javascript. At present it's generated on the client and uses public properties defined in your code behind to generate the coordinates. These coordinates can be initialized in your code behind or how every you choose to do so. The link that you mention is a get directions link from the cloud generated by the mouse click.

I suggest that you try the code by placing it on a page and then loading some coordinates into it just as a test.

Let me know if you need any further assistance.

Sean
0
 
LVL 8

Expert Comment

by:MrAgile
ID: 22872921
oh and here is the converted code you requested. Just remember to remove the *. For future reference you can do this yourself here http://www.developerfusion.com/tools/convert/csharp-to-vb/

sean

 

    * Imports System

    *

    * Public Partial Class JS_ucGoogleMap

    *     Inherits System.Web.UI.UserControl

    *     Public Property Postcode() As String

    *         Get

    *             Return DirectCast((If(ViewState("Postcode"), "")), String)

    *         End Get

    *         Set(ByVal value As String)

    *             ViewState("Postcode") = value

    *         End Set

    *     End Property

    *     Public Property Width() As String

    *         Get

    *             Return DirectCast((If(ViewState("Width"), "400")), String)

    *         End Get

    *         Set(ByVal value As String)

    *             ViewState("Width") = value

    *         End Set

    *     End Property

    *     Public Property Height() As String

    *         Get

    *             Return DirectCast((If(ViewState("Height"), "300")), String)

    *         End Get

    *         Set(ByVal value As String)

    *             ViewState("Height") = value

    *         End Set

    *     End Property

    *     Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

    *        

    *     End Sub

    * End Class

Open in new window

0
 

Author Comment

by:azyet24
ID: 22886356
I'm not sure how to get this to work.  Please review what I have and see if you can identify what I'm doing wrong.
    <script type="text/javascript" language="javascript">

     function load() {

 

      if (GBrowserIsCompatible()) { 

      

      

       function createMarker(point,html) {

        // ======== Add a "directions" link ======

        html += '<br> <a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions to mystore:</a>';

      

        //var letter = String.fromCharCode("A".charCodeAt(0) + "a");

        var letteredIcon = new GIcon(G_DEFAULT_ICON);

        letteredIcon.image = "http://xxx.xxx.xxx.xxx/images/r.png";

        letteredIcon.iconSize = new GSize(56, 58);

        letteredIcon.shadowSize = new GSize(58, 60);

        letteredIcon.iconAnchor = new GPoint(27, 34);

        letteredIcon.infoWindowAnchor = new GPoint(9, 2);

        // Set up our GMarkerOptions object

        markerOptions = { icon:letteredIcon };

        var marker = new GMarker(point, markerOptions);

 

        GEvent.addListener(marker, "click", function() {

        marker.openInfoWindowHtml(html);

        });

        return marker;

        }

 

 

      var map = new GMap2(document.getElementById("map"));

      map.addControl(new GLargeMapControl());

      map.addControl(new GMapTypeControl());

      map.setCenter(new GLatLng('<%= Longitude %>','<%= Latitude %>'),15);

    

      var point = new GLatLng('<%= Longitude %>','<%= Latitude %>');

      var marker = createMarker(point,'<div style="width:240px">Mystore:');

      map.addOverlay(marker);

       map.openInfoWindowHtml(map.getCenter(),'<div style="width:240px"> <a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions to mystore:</a>');

      

    }

}

</script>

</head>

<body onload="load">

    <form id="form1" runat="server">

    <div id="map">

    

    </div>

    </form>

</body>

</html>
 

################################
 

Public Property Longitude() As String

        Get

            Return DirectCast((If(ViewState("Longitude"), "")), String)

        End Get

        Set(ByVal value As String)

            value = "33.378575"

            ViewState("Longitude") = value

        End Set

    End Property

    Public Property Latitude() As String

        Get

            Return DirectCast((If(ViewState("Latitude"), "")), String)

        End Get

        Set(ByVal value As String)

            value = "-86.834309"

            ViewState("Latitude") = value

        End Set

    End Property

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
 

    End Sub

Open in new window

0
 
LVL 8

Expert Comment

by:MrAgile
ID: 22889758
Ok. What is the error message you are getting?
0
 

Author Comment

by:azyet24
ID: 22890357
No error message...it just doesn't show the map.
0
 
LVL 8

Expert Comment

by:MrAgile
ID: 22891108
It could be the key. Send me the link so I can see it.
0
 

Author Comment

by:azyet24
ID: 22891435
This is only on my localhost so I don't have a way to show it to you at this time.  My key does work though.  Can you get this to work on your end using your key and then post the aspx and aspx.vb code, minus your key please?
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 8

Expert Comment

by:MrAgile
ID: 22891457
Ok post all of your code and I will check it for you and then send it back.

Sean
0
 

Author Comment

by:azyet24
ID: 22891572
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="GoogleMapTest3.aspx.vb" Inherits="GoogleMapTest3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=MYKEY"
      type="text/javascript"></script>
    <script type="text/javascript">

     function load() {
 
      if (GBrowserIsCompatible()) {
     
     
       function createMarker(point,html) {
        // ======== Add a "directions" link ======
        html += '<br> <a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions to mystore:</a>';
     
        //var letter = String.fromCharCode("A".charCodeAt(0) + "a");
        var letteredIcon = new GIcon(G_DEFAULT_ICON);
        letteredIcon.image = "http://xxx.xxx.xxx.xxx/images/r.png";
        letteredIcon.iconSize = new GSize(56, 58);
        letteredIcon.shadowSize = new GSize(58, 60);
        letteredIcon.iconAnchor = new GPoint(27, 34);
        letteredIcon.infoWindowAnchor = new GPoint(9, 2);
        // Set up our GMarkerOptions object
        markerOptions = { icon:letteredIcon };
        var marker = new GMarker(point, markerOptions);
 
        GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
        });
        return marker;
        }
 
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng('<%= Longitude %>','<%= Latitude %>'),15);
   
      var point = new GLatLng('<%= Longitude %>','<%= Latitude %>');
      var marker = createMarker(point,'<div style="width:240px">Mystore:');
      map.addOverlay(marker);
       map.openInfoWindowHtml(map.getCenter(),'<div style="width:240px"> <a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions to mystore:</a>');
     
    }
}
</script>
</head>
<body onload="load">
    <form id="form1" runat="server">
    <div id="map" style="width: 500px; height:450px;"></div>
    </form>
</body>
</html>

####################################

Imports System
Partial Class GoogleMapTest3
    Inherits System.Web.UI.Page

    Public Property Longitude() As String
        Get
            Return DirectCast((If(ViewState("Longitude"), "")), String)
        End Get
        Set(ByVal value As String)
            value = "33.378575"
            ViewState("Longitude") = value
        End Set
    End Property
    Public Property Latitude() As String
        Get
            Return DirectCast((If(ViewState("Latitude"), "")), String)
        End Get
        Set(ByVal value As String)
            value = "-86.834309"
            ViewState("Latitude") = value
        End Set
    End Property
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    End Sub
End Class
0
 
LVL 8

Expert Comment

by:MrAgile
ID: 22891841
here is your problem.

change this <body onload="load">

to this <body onload="load();">

Let me  know how it goes now.
0
 

Author Comment

by:azyet24
ID: 22892106
Duh..sorry I missed that.  Ok, now the map loads but my lat/long is not filling correctly.  Can you see what I'm doing wrong in my code-behind?
0
 

Author Comment

by:azyet24
ID: 22892120
Or more specifically, how do I assign a value to <%= Latitude %> & <%= Longitude %> from code-behind?
0
 
LVL 8

Expert Comment

by:MrAgile
ID: 22892153
I suggest that you test the map with *hardcoded* values first then get the code working.

This is an excellent resource for google maps. http://econym.googlepages.com/index.htm


Sean
0
 

Author Comment

by:azyet24
ID: 22909596
I can get this to work with hardcoded values, but my problem still remains I can't populate these: <%= Latitude %> & <%= Longitude %>

Any suggestions?
0
 
LVL 8

Expert Comment

by:MrAgile
ID: 22917926
That's a pretty broad question. You only need to populate the values if your are have more than one map to show? How many maps do you need to create?
0
 

Author Comment

by:azyet24
ID: 22918619
this map will load only once per page, however, the lat/long will change each time.  The site displays real estate so a different house will need it's own map.  That is why the map needs to be dynamic with lat/long.
0
 
LVL 8

Accepted Solution

by:
MrAgile earned 500 total points
ID: 22918795
I'm assuming that the properties will be changing on a regular basis? If that is the case then you will need to pass the address information to Google or some other provider to produce the map. I have never tried this but there are some resources out there that show you how to do so.

It's also worth checking the google code library (http://code.google.com/) and the newsgroups (groups.google.com) as this question would have been asked in the past.

Sean


0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
This video discusses moving either the default database or any database to a new volume.
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

706 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now