Hi everyone
I am using a classifieds script and has google maps in it but the coding is for v2 and being that it is depreciated and need to upgrade to v3 version
Just wondering if the following coding is correct, I have changed the bits that I can see need changing going by the google maps v3 upgrade
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type="text/javascript" src="javascript/markermanager.js"></script>
<script type="text/javascript" src="javascript/pdmarker.js"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var mgr;
var stopupdate = false;
var currentMarkers = [];
var lastQuery = "";
var filter = "";
var sort = "DateAdded";
var openMarker;
var iconGreen = new google.maps.MarkerImage();
iconGreen.image = 'images/mm_20_green.png';
//iconGreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconGreen.iconSize = new GSize(12, 20);
iconGreen.shadowSize = new GSize(22, 20);
iconGreen.iconAnchor = new GPoint(6, 20);
iconGreen.infoWindowAnchor = new GPoint(5, 1);
function load() {
if (GBrowserIsCompatible()) {
map = new google.maps.Map(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.setCenter(new google.maps.LatLng(0,0), 1);
mgr = new MarkerManager(map);
google.maps.Event.addListener(map, "infowindowopen", function() {
stopupdate = false;
});
google.maps.Event.addListener(map, "infowindowopen", function() {
stopupdate = true;
});
google.maps.Event.addListener(map, "infowindowclose", function() {
stopupdate = false;
});
/*google.maps.Event.addListener(map, "movestart", function() {
if (stopupdate == false)
{
mgr.clearMarkers();
map.clearOverlays();
}
});*/
google.maps.Event.addListener(map, "moveend", function() {
if ((map.getZoom() > 3) && (stopupdate == false))
{
updateListing(true,0);
}
});
}
}
function IsNumeric(sText)
{
var ValidChars = "0123456789.";
var IsNumber=true;
var Char;
for (i = 0; i < sText.length && IsNumber == true; i++)
{
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1)
{
IsNumber = false;
}
}
return IsNumber;
}
function clearMarkers() {
var bounds = map.getBounds();
for (var i=0; i < currentMarkers.length; i++) {
if (!bounds.contains(currentMarkers[i].getPoint()))
map.removeOverlay(currentMarkers[i]);
}
currentMarkers = [];
}
function clearMarkers2(markers) {
if (!markers)
{
map.clearOverlays();
return;
}
var bounds = map.getBounds();
for (var i=0; i < currentMarkers.length; i++) {
var inlist = false;
var idproduct = currentMarkers[i].idrecords;
for (var j = 0; j < markers.length; j++) {
var idmarker = markers[j].getAttribute("idproduct");
if (idmarker == idproduct)
{
inlist = true;
break;
}
}
if (!inlist)
map.removeOverlay(currentMarkers[i]);
}
currentMarkers = [];
}
function updateListing(usebounds,zoomtomap) {
stopupdate = true;
var latBegin,lngBegin,latEnd,lngEnd,boundsquery;
var subfilter = "";
subfilter = filter;
var sort = "DateAdded";
if (usebounds)
{
var bounds = map.getBounds();
latEnd = bounds.getNorthEast().lat();
lngEnd = bounds.getNorthEast().lng();
latBegin = bounds.getSouthWest().lat();
lngBegin = bounds.getSouthWest().lng();
boundsquery = "?beginLat="+ latBegin + "&beginLng="+ lngBegin + "&endLat="+ latEnd + "&endLng="+ lngEnd;
}
else
{
if (filter.length > 1)
{
boundsquery = "?";
subfilter = filter.substr(1,filter.length);
}
}
//var groundOverlay = new GGroundOverlay("/images/loading.jpg", map.getBounds());
//map.addOverlay(groundOverlay);
//clearMarkers();
//mgr.clearMarkers();
//map.clearOverlays();
var url = "getmarkers.php" + boundsquery + subfilter;
GDownloadUrl(url, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
clearMarkers2(markers);
for (var i = 0; i < markers.length; i++) {
var idproduct = markers[i].getAttribute("idproduct");
var description = markers[i].getAttribute("description");
var stock = markers[i].getAttribute("stock");
var make = markers[i].getAttribute("make");
var model = markers[i].getAttribute("model");
var year = markers[i].getAttribute("year");
var imageurl = markers[i].getAttribute("imageurl");
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, description, stock,make,model, year, idproduct,imageurl);
map.addOverlay(marker);
currentMarkers.push(marker);
}
if (zoomtomap)
map.zoomToMarker(10);
url = "getprops.php" + boundsquery + subfilter;
lastQuery = url;
GDownloadUrl(url, function(data) {
document.getElementById("container").innerHTML = data;
});
});
stopupdate = false;
}
function loadWindowInfo(recs)
{
var point;
var marker;
point = new google.maps.LatLng (recs[0].latitude,recs[0].longitude);
marker = new PdMarker(point);
map.addOverlay(marker);
var address = recs[0].pcity + ", " + recs[0].pcountry
var simage = "<br /><br /><img src='" + recs[0].imageurl + "'>"
marker.openInfoWindowHtml("<div align=center><br /><a target=_blank href='index.php?p=details&id=" + recs[0].idproduct + "'><b>" + recs[0].stock + "</b>" + simage + "</a><br /><br /><b>" + make + " - " + model + " - " + year + " - " + "</b></div>");
}
function createMarker(point, description, stock,make,model, year, idproduct,imageurl) {
var marker = new PdMarker(point, iconGreen);
marker.setId(idproduct);
var address = make + " - " + model+ " - " + year
var simage = "<br /><br /><img src='" + imageurl + "'>"
var html = "<div align=center><br /><a target=_blank href='index.php?p=details&id=" + idproduct + "'><b>" + stock + "</b>" + simage + "</a><br /><br /><b>" + address + "</b></div>";
google.maps.Event.addListener(marker, 'click', function() {
stopupdate = false;
openMarker = marker;
marker.openInfoWindowHtml(html);
});
return marker;
}
function gotoPage(num)
{
stopupdate = true;
var url = lastQuery + "&page=" + num;
GDownloadUrl(url, function(data) {
document.getElementById("container").innerHTML = data;
});
stopupdate = false;
}
function changefilter()
{
var make = document.formarticle.make.value;
var modelx = document.formarticle.model.value;
var category = document.formarticle.category.value;
filter = "&make=" + make + "&model=" + modelx + "&category=" + category ;
updateListing(1,0);
}
function sortProperties()
{
stopupdate = true;
method = document.formarticle.method.value;
orderby = document.formarticle.orderby.value;
stopupdate = true;
var url = lastQuery + "&method=" + method+ "&orderby=" + orderby;
GDownloadUrl(url, function(data) {
document.getElementById("container").innerHTML = data;
});
stopupdate = false;
}
function searchFiltered()
{
var category = document.formarticle.category.value;
if (category.length > 0)
{
var make = document.formarticle.make.value;
var modelx = document.formarticle.model.value;
var category = document.formarticle.category.value;
filter = "&make=" + make + "&model=" + modelx + "&category=" + category + '&language_session={{language_sessionini}}';
updateListing(0,1);
}
}
function resetFilter()
{
document.formarticle.reset();
stopupdate = false;
currentMarkers = [];
lastQuery = "";
filter = "";
sort = "date_add";
if (map.getZoom() > 6)
{
updateListing(1,0);
}
else
{
map.clearOverlays();
map.setCenter(new google.maps.LatLng(0,0), 1);
document.getElementById("container").innerHTML = "";
}
}
google.maps.Map.prototype.zoomToMarker = function(slopPercentage, heightOffsetPct) {
stopupdate = true;
var count = 0;
var thePoint, x, y, minX, maxX, minY, maxY, span;
var marker = this.getFirstMarker();
while (marker != null)
{
if (!marker.isHidden())
{
thePoint = marker.getPoint();
// x = thePoint.x; y = thePoint.y;
x = thePoint.lat(); y = thePoint.lng();
if (count == 0)
{
minX = x; maxX = x; minY = y; maxY = y;
}
else
{
if (x < minX) minX = x;
if (x > maxX) maxX = x;
if (y < minY) minY = y;
if (y > maxY) maxY = y;
}
count++;
}
marker = this.getNextMarker();
}
if (count == 1)
this.setCenter(new google.maps.LatLng(x,y), 10);
else if (count > 1)
{
var center = new google.maps.LatLng((minX + maxX) / 2, (minY + maxY) / 2)
span = new GSize(Math.abs(maxX - minX), Math.abs(maxY - minY));
slopWid = 0;
slopHgt = 0;
if (typeof slopPercentage != "undefined")
{
slopWid = span.width * slopPercentage / 200;
slopHgt = span.height * slopPercentage / 200;
span.width *= 1 + slopPercentage / 100;
span.height *= 1 + slopPercentage / 100;
}
deltaHgt = 0;
if (typeof heightOffsetPct != "undefined")
{
deltaHgt = span.height * heightOffsetPct / 100;
center = new google.maps.LatLng(center.lat() + deltaHgt, center.lng());
}
// needs slop
var bounds = new google.maps.LatLngBounds(new google.maps.LatLng(minX-slopHgt, minY-slopWid), new google.maps.LatLng(maxX+slopHgt, maxY+slopWid)); // sw, ne
var zoom = this.getBoundsZoomLevel(bounds);
map.setCenter(center, zoom);
}
stopupdate = false;
}
//]]>
</script>
<form method="get" action="index.php" name="formarticle">
<TABLE cellSpacing=0 cellPadding=0 border=0 width="665">
<TBODY>
<tr>
<td valign="top">
<TABLE cellSpacing=1 cellPadding=1 width="100%" border=0 >
<tr>
<td><strong>{{tpl_auto_category}}</strong><br />
<select name="category" size="1" style="width:165px" onchange="{{config_auto_categorymodelreturn}}funcget1('make',document.formarticle.make.value,document.formarticle.category.value,'make',document.getElementById('make'),'Loading...');return false;">
<option value="">...</option>
{{category}}
</select>
</td>
<td><strong>{{tpl_auto_make}}</strong><br>
<div id="make" >
<select name="make" size="1" style="width:165px" onchange="funcget1('model',document.formarticle.make.value,document.formarticle.category.value,'model',document.getElementById('model'),'Loading...');return false;">
<option value="">...</option>
{{make}}
</select>
</div>
</td>
<td><strong>{{tpl_auto_model}}</strong><br>
<div id="model" >
<select name="model" size="1" style="width:165px" >
<option value="">...</option>
{{model}}
</select>
</div>
</select>
</td>
<td><button onclick="javascript:searchFiltered();" type="button" class="buttonsearch" >{{tpl_auto_Display_Results}}</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div id="map" style="width: 100%; height: 400px"></div>
</td>
</tr>
<tr>
<td><div id=container>
</div></td>
</tr>
</TBODY>
</TABLE>
<input type="hidden" name="first" value="1" />
<input type="hidden" name="language_session" value="{{language_set}}" />
<input type="hidden" name="p" value="mapsearch" />
</form>
Does it all look or do I need change other bits of the coding
Kind regards
Ian