PDA

View Full Version : Adding markers to a google map from databased postcode.

many_tentacles
03-02-2010, 03:50 PM
Hi

I have a code which converts a postcode into Long/Lat and inserts a marker on to a google map. All good stuff.

Now though I need to insert lots of markers onto the map based on the postcodes from a database.

I have the following code which only inserts one marker which is the last postcode from the database.

Any ideas how I can adapt this to insert all the markers??

Thanks

<%@ Page Language="VB" Debug="false" %>
<%@ import Namespace="System.Text" %>
<%@ import Namespace="System.Web.Mail" %>
<%@ import Namespace="System.Data" %>
<%@ import Namespace="System.Data.OLEDB" %>
<%@ import Namespace="System.Data.SqlClient" %>

<script runat="server">

'***********************************************************
Sub Page_Load(ByVal Sender as Object, ByVal E as EventArgs)
'***********************************************************

If Not IsPostBack Then
LoadData()
End If

end sub




'loads data for DataList OpenDayVenues
'***********************************************************
Public Sub LoadData()
'***********************************************************

Dim query1 As String
Dim strSort AS String


Dim LogData1 As logacc.HpbLogin = New logacc.HpbLogin()
query1 = ("SELECT * FROM odandex WHERE od_flag = '1' AND venue_onoff = '1'; SELECT * FROM odex_dates WHERE venue_date_onoff = '1'")
Dim MasterInfo As DataSet = LogData1.LogQ1(query1)

Dim objDV As New DataView()

MasterInfo.Relations.Add("ActualDays", MasterInfo.Tables(0).Columns("id"), MasterInfo.Tables(1).Columns("id"),false)

objDV = MasterInfo.Tables(0).DefaultView

strSort = ("county_header, venue_order")

objDV.Sort = strSort

OpenDayVenues.DataSource = objDV 'DS.Tables(0)
OpenDayVenues.DataBind()

end sub

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Geocoding UK Postcodes with Google APIs Demo</title>
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#map {
width: 100%;
height: 100%;
z-index:1;
}
#controls {
z-index:2;
background-color:#FFF;
border:1px solid #000;
position:absolute;
top:5px;
left:100px;
width:300px;
padding:10px;
}
</style>

<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>


<script type="text/javascript">
var map;
var localSearch = new GlocalSearch();


var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);
</script>

<asp:Repeater id="OpenDayVenues" runat="server">
<itemtemplate>
<script type="text/javascript">
function usePointFromPostcode(postcode,callbackFunction) {
localSearch.setSearchCompleteCallback(null, function() {
if (localSearch.results[0]) {
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
var point = new GLatLng(resultLat,resultLng);
callbackFunction(point);
}
else {
alert("Postcode not found!");
}
});
localSearch.execute("<%#Container.DataItem("venue_postcode")%>, UK");
}

function placeMarkerAtPoint(point) {

//Place the new Open day markers...
var marker = new GMarker(point,icon);
map.addOverlay(marker);
map.setCenter(point, 7);



}
</script>
</itemtemplate>
</asp:Repeater>

<script type="text/javascript">
function showPointLatLng(point)
{
alert("Latitude: " + point.lat() + "\nLongitude: " + point.lng());
}


function mapLoad() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(54.622978,-2.592773), 5, G_HYBRID_MAP);
}
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

function addUnLoadEvent(func) {
var oldonunload = window.onunload;
if (typeof window.onunload != 'function') {
window.onunload = func;
} else {
window.onunload = function() {
oldonunload();
func();
}
}
}


addLoadEvent(mapLoad);
addUnLoadEvent(GUnload);
</script>
</head>
<body>



<div id="map">
</div>






<div id="controls">
Postcode: <input type="text" id="postcode" size="10" />
<input type="submit" value="Place Marker" onclick="javascript:usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint)" />

</div>
</body>
</html>

Thanks... Please prompt me for more info... this has fried my brain