Jamie
asked on
Google map markers within give radius e.g. 30 miles from SQL server table using classic asp
Hi All,
I'd like to take a dynamically created dataset from a MSSQL database table using classic asp and plot them on a "google maps" map - ideally within a given range of say 30 miles.
For exmaple, I have a MSSQL tables called LocalStores, that have the following data fields;
1. Store Name
2. Store Type
3. Store Latitude
4. Store Longitude
I've signed up for my Google Key, but cannot work out to extract my MSSQL data using Classic ASP and to plot markers onto a Google maps - I also want to customise the markers based on store type.
I'm totally confused with all the options - I also need the maps to work on Windows/Android and Apple devices - with my example code below does not seem to, it only displays on Windows and not iPads etc.
Any help would be greatly and very much appreciated.
Regards
JamWales
My Code so far;
========================
default.asp
<%@ language="VBScript" %>
<%Option Explicit%>
<!--#include file="Controls/GoogleMaps. asp" -->
<!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>
<title>Google Maps Searcher</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<%
' Initialize Google Maps object, which encapsulates all functionality
Dim googleMaps : Set googleMaps = New ASP2_Controls_GoogleMapsSe archer
' googleMaps.APIKey = "xxxxx"
googleMaps.APIKey = xxxxx"
%>
</head>
<body>
<%
' Render UI
googleMaps.Render
Response.Write "<br><br>Map Drawn - can you see it?<br><br>"
' Dispose
%>
</body>
</html>
========================
GoogleMaps.asp
<%
Class ASP2_Controls_GoogleMapsSe archer
' ///// Member variables//////
Dim m_apiKey ' As String
Dim m_ID ' As String
Dim m_customFieldLabel ' As String
Dim m_customAttendees ' As String
Dim m_attributes ' As String
' ///// Properties variables//////
Public Property Get APIKey
APIKey = m_apiKey
End Property
Public Property Let APIKey(value)
m_apiKey = value
End Property
' ///// Construciton variables//////
' Constructor
Private Sub Class_Initialize
End Sub
' Destructor
Private Sub Class_Terminate
End Sub
' ///// Public Methods variables//////
' Renders the control UI
Public Sub Render()
%>
<div id="mapsearcher" style="left: 10px; position: relative;">
<form id="frmsearcher" method="post" action="">
Area or Zip Code:
<input type="text" size="30" name="address" id="address" class="required email">
Radius:
<input type="text" size="4" name="radius" value='30' id="radius">
<input id="optMiles" name="group0" type="radio" title="Miles" checked="checked" />Miles
<input id="optKm" name="group0" type="radio" title="Kilometers" />Km<br />
<span id="errMsg" style="font-style: oblique; color: Red"></span>
<input type="button" value="Geocode" onclick="codeAddress();">
</form>
</div>
<div id="map" style="width: 1000px; height: 600px; top: 10px; left: 10px; position: relative;
visibility: hidden;">
</div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<%=Me.APIKey %>&sensor=false"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
var geocoder;
var map;
var cCircle;
var addr = "";
var rad = "";
$(document).ready(function () {
$("#address").keydown(clea rErr);
});
function mapLoader() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397 , 150.644);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROAD MAP
}
map = new google.maps.Map(document.g etElementB yId("map") , myOptions);
}
function codeAddress() {
addr = $("#address").val();
rad = $("#radius").val();
if (map == null) {
mapLoader();
}
if (validate()) {
geocoder.geocode({ 'address': addr }, function (results, status) {
if (status == google.maps.GeocoderStatus .OK) {
map.setCenter(results[0].g eometry.lo cation);
map.setZoom(9);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.locati on,
title: addr
});
makeRadius();
$("#map").css("visibility" , "visible");
} else {
$("#errMsg").html("Geocode was not successful for the following reason: " + status + "<br />");
}
});
}
}
function makeRadius() {
if (cCircle != null) {
cCircle.setMap(null);
}
if ($('#optMiles').attr('chec ked') == 'checked') {
try {
var rVal;
rVal = Math.round(1.61 * rad);
rad = rVal * 1000;
}
catch (e) {
$("#errMsg").html(e.Messag e + "<br />");
}
}
else {
rad = rad * 1000;
}
var populationOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
center: map.center,
radius: rad
};
cCircle = new google.maps.Circle(populat ionOptions );
}
function validate() {
var regLet = /\d+|\w+/i;
var regRad = /^(\d+)+$/i;
if (!regLet.test(addr)) {
$("#errMsg").html("*Plase type correct Area or Zip code<br />");
return false;
}
if (rad == "") {
rad = "30";
return true;
}
if (!regRad.test(rad)) {
$("#errMsg").html("*Plase type correct Radius value<br />");
return false;
}
return true;
}
function clearErr() {
$("#errMsg").html("");
}
</script>
<%
End Sub
End Class
%>
========================
I'd like to take a dynamically created dataset from a MSSQL database table using classic asp and plot them on a "google maps" map - ideally within a given range of say 30 miles.
For exmaple, I have a MSSQL tables called LocalStores, that have the following data fields;
1. Store Name
2. Store Type
3. Store Latitude
4. Store Longitude
I've signed up for my Google Key, but cannot work out to extract my MSSQL data using Classic ASP and to plot markers onto a Google maps - I also want to customise the markers based on store type.
I'm totally confused with all the options - I also need the maps to work on Windows/Android and Apple devices - with my example code below does not seem to, it only displays on Windows and not iPads etc.
Any help would be greatly and very much appreciated.
Regards
JamWales
My Code so far;
========================
default.asp
<%@ language="VBScript" %>
<%Option Explicit%>
<!--#include file="Controls/GoogleMaps.
<!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>
<title>Google Maps Searcher</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<%
' Initialize Google Maps object, which encapsulates all functionality
Dim googleMaps : Set googleMaps = New ASP2_Controls_GoogleMapsSe
' googleMaps.APIKey = "xxxxx"
googleMaps.APIKey = xxxxx"
%>
</head>
<body>
<%
' Render UI
googleMaps.Render
Response.Write "<br><br>Map Drawn - can you see it?<br><br>"
' Dispose
%>
</body>
</html>
========================
GoogleMaps.asp
<%
Class ASP2_Controls_GoogleMapsSe
' ///// Member variables//////
Dim m_apiKey ' As String
Dim m_ID ' As String
Dim m_customFieldLabel ' As String
Dim m_customAttendees ' As String
Dim m_attributes ' As String
' ///// Properties variables//////
Public Property Get APIKey
APIKey = m_apiKey
End Property
Public Property Let APIKey(value)
m_apiKey = value
End Property
' ///// Construciton variables//////
' Constructor
Private Sub Class_Initialize
End Sub
' Destructor
Private Sub Class_Terminate
End Sub
' ///// Public Methods variables//////
' Renders the control UI
Public Sub Render()
%>
<div id="mapsearcher" style="left: 10px; position: relative;">
<form id="frmsearcher" method="post" action="">
Area or Zip Code:
<input type="text" size="30" name="address" id="address" class="required email">
Radius:
<input type="text" size="4" name="radius" value='30' id="radius">
<input id="optMiles" name="group0" type="radio" title="Miles" checked="checked" />Miles
<input id="optKm" name="group0" type="radio" title="Kilometers" />Km<br />
<span id="errMsg" style="font-style: oblique; color: Red"></span>
<input type="button" value="Geocode" onclick="codeAddress();">
</form>
</div>
<div id="map" style="width: 1000px; height: 600px; top: 10px; left: 10px; position: relative;
visibility: hidden;">
</div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<%=Me.APIKey %>&sensor=false"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
var geocoder;
var map;
var cCircle;
var addr = "";
var rad = "";
$(document).ready(function
$("#address").keydown(clea
});
function mapLoader() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROAD
}
map = new google.maps.Map(document.g
}
function codeAddress() {
addr = $("#address").val();
rad = $("#radius").val();
if (map == null) {
mapLoader();
}
if (validate()) {
geocoder.geocode({ 'address': addr }, function (results, status) {
if (status == google.maps.GeocoderStatus
map.setCenter(results[0].g
map.setZoom(9);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.locati
title: addr
});
makeRadius();
$("#map").css("visibility"
} else {
$("#errMsg").html("Geocode
}
});
}
}
function makeRadius() {
if (cCircle != null) {
cCircle.setMap(null);
}
if ($('#optMiles').attr('chec
try {
var rVal;
rVal = Math.round(1.61 * rad);
rad = rVal * 1000;
}
catch (e) {
$("#errMsg").html(e.Messag
}
}
else {
rad = rad * 1000;
}
var populationOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
center: map.center,
radius: rad
};
cCircle = new google.maps.Circle(populat
}
function validate() {
var regLet = /\d+|\w+/i;
var regRad = /^(\d+)+$/i;
if (!regLet.test(addr)) {
$("#errMsg").html("*Plase type correct Area or Zip code<br />");
return false;
}
if (rad == "") {
rad = "30";
return true;
}
if (!regRad.test(rad)) {
$("#errMsg").html("*Plase type correct Radius value<br />");
return false;
}
return true;
}
function clearErr() {
$("#errMsg").html("");
}
</script>
<%
End Sub
End Class
%>
========================
ASKER
Hi leakim971,
Many thanks for your reply - the maps are displaying on iPhones etc now - thank you very much - rocking!
Do you know how I would place multiple markers from my SQL database onto the map - I can write the classic asp sql calls, just cannot work out how to feed them into the Google map?
Regards
JamWales
Many thanks for your reply - the maps are displaying on iPhones etc now - thank you very much - rocking!
Do you know how I would place multiple markers from my SQL database onto the map - I can write the classic asp sql calls, just cannot work out how to feed them into the Google map?
Regards
JamWales
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi leakim971 - thank you for all your help, much appreciated. Regards JamWales
Open in new window
by :Open in new window