asked on

Modify C# Code

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

MrAgile

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

azyet24

ASKER

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?

MrAgile

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

MrAgile

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

azyet24

ASKER

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

MrAgile

Ok. What is the error message you are getting?

azyet24

ASKER

No error message...it just doesn't show the map.

MrAgile

It could be the key. Send me the link so I can see it.

azyet24

ASKER

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?

MrAgile

Ok post all of your code and I will check it for you and then send it back.

Sean

azyet24

ASKER

<%@ 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&v=2&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

MrAgile

here is your problem.

change this <body onload="load">

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

Let me know how it goes now.

azyet24

ASKER

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?

azyet24

ASKER

Or more specifically, how do I assign a value to <%= Latitude %> & <%= Longitude %> from code-behind?

MrAgile

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

azyet24

ASKER

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

Any suggestions?

MrAgile

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?

azyet24

ASKER

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.

ASKER CERTIFIED SOLUTION

MrAgile

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial