Hello everyone,
I have spent the last 2 hours trying to get this to work and am so lost and just cant get it to work no matter what I try .
Basically I have a form which controls a google map which lets you put a Postcode in, it then finds the nearest pointer I have added to this based on your chosen postcode.
The problem is, this is a return false; based form, BUT I then need to also do some ASP coding based on the Postcode value submitted via the form, but i cant access it on a return false and maybe this is really easy, but I just dont know how to change it around to achieve both and with the original form working.
Sadly im no javascript guru and am really lost
My code is below :
<script src="type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var icon0;
var newpoints = new Array();
var markers = new Array();
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(loadMap);
addLoadEvent(addPoints);
function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 54.41892996865827, -7.119140625), 5);
// map.setMapType(G_MAP_TYPE);
icon0 = new GIcon();
icon0.image = " icon0.shadow = " icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);
}
function addPoints() {
<% MapLoop = 0
sqlMap = "SELECT * FROM Clients WHERE cID1 <> '' AND isActive=1"
set mapRs = connMain.execute(sqlMap)
If NOT mapRs.EOF Then
While NOT mapRs.EOF
MapCoord = mapRs("cID1") %>
newpoints[<%= MapLoop %>] = new Array(<%= MapCoord %>, icon0, 'Office1', '<b>Test Solutions<%= MapLoop %><\/b><br \/>Address here');
<% MapLoop=MapLoop+1
mapRs.MoveNext
Wend
End If
mapRs.Close
set mapRs = Nothing %>
for(var i = 0; i < newpoints.length; i++) {
var point = new GPoint(newpoints[1],newpoints[0]);
var popuphtml = newpoints[4];
var marker = createMarker(point,newpoints[2],popuphtml);
markers.push(marker);
map.addOverlay(marker);
}
}
function createMarker(point, icon, popuphtml) {
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(popuphtml);
});
return marker;
}
function closestMarkerSearch(map, markers, zoom, address) {
if (markers.length == 0) {
throw new Exception('No markers given');
}
new GClientGeocoder().getLatLng(address, function(latLng) {
if (latLng === null) {
alert('Please enter a postcode');
} else {
var distance;
var closestDistance = null;
var closestMarker = null;
for (var i = 0; i < markers.length; i++) {
distance = latLng.distanceFrom(markers.getLatLng());
if (closestDistance === null || distance < closestDistance) {
closestDistance = distance;
closestMarker = markers;
}
}
map.setZoom(zoom);
map.setCenter(closestMarker.latLng);
GEvent.trigger(closestMarker, 'click');
}
});
}
//]]>
</script>
<div id="googleMap">
<form name="SearchForm" onsubmit="closestMarkerSearch(map, markers, 10, document.getElementById('PostCode').value); return false">
<div class="formLineMap">
<label>Enter your nearest Town or Postcode:</label>
<input size="10" type="text" name="PostCode" id="PostCode" class="text" />
<input type="submit" name="Search" value="Search" class="button" />
</div>
<div class="clear"></div>
</form>
<div id="map"></div>
</div>
Any help would be so so much appreciated - you have no idea
Many thanks,
Gia xx
I have spent the last 2 hours trying to get this to work and am so lost and just cant get it to work no matter what I try .
Basically I have a form which controls a google map which lets you put a Postcode in, it then finds the nearest pointer I have added to this based on your chosen postcode.
The problem is, this is a return false; based form, BUT I then need to also do some ASP coding based on the Postcode value submitted via the form, but i cant access it on a return false and maybe this is really easy, but I just dont know how to change it around to achieve both and with the original form working.
Sadly im no javascript guru and am really lost
My code is below :
<script src="type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var icon0;
var newpoints = new Array();
var markers = new Array();
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(loadMap);
addLoadEvent(addPoints);
function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 54.41892996865827, -7.119140625), 5);
// map.setMapType(G_MAP_TYPE);
icon0 = new GIcon();
icon0.image = " icon0.shadow = " icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);
}
function addPoints() {
<% MapLoop = 0
sqlMap = "SELECT * FROM Clients WHERE cID1 <> '' AND isActive=1"
set mapRs = connMain.execute(sqlMap)
If NOT mapRs.EOF Then
While NOT mapRs.EOF
MapCoord = mapRs("cID1") %>
newpoints[<%= MapLoop %>] = new Array(<%= MapCoord %>, icon0, 'Office1', '<b>Test Solutions<%= MapLoop %><\/b><br \/>Address here');
<% MapLoop=MapLoop+1
mapRs.MoveNext
Wend
End If
mapRs.Close
set mapRs = Nothing %>
for(var i = 0; i < newpoints.length; i++) {
var point = new GPoint(newpoints[1],newpoints[0]);
var popuphtml = newpoints[4];
var marker = createMarker(point,newpoints[2],popuphtml);
markers.push(marker);
map.addOverlay(marker);
}
}
function createMarker(point, icon, popuphtml) {
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(popuphtml);
});
return marker;
}
function closestMarkerSearch(map, markers, zoom, address) {
if (markers.length == 0) {
throw new Exception('No markers given');
}
new GClientGeocoder().getLatLng(address, function(latLng) {
if (latLng === null) {
alert('Please enter a postcode');
} else {
var distance;
var closestDistance = null;
var closestMarker = null;
for (var i = 0; i < markers.length; i++) {
distance = latLng.distanceFrom(markers.getLatLng());
if (closestDistance === null || distance < closestDistance) {
closestDistance = distance;
closestMarker = markers;
}
}
map.setZoom(zoom);
map.setCenter(closestMarker.latLng);
GEvent.trigger(closestMarker, 'click');
}
});
}
//]]>
</script>
<div id="googleMap">
<form name="SearchForm" onsubmit="closestMarkerSearch(map, markers, 10, document.getElementById('PostCode').value); return false">
<div class="formLineMap">
<label>Enter your nearest Town or Postcode:</label>
<input size="10" type="text" name="PostCode" id="PostCode" class="text" />
<input type="submit" name="Search" value="Search" class="button" />
</div>
<div class="clear"></div>
</form>
<div id="map"></div>
</div>
Any help would be so so much appreciated - you have no idea
Many thanks,
Gia xx