Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    82
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript api v2 to v3 upgrade

    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

    Code:
    <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script&gt;
    <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

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Why don't you just see if it works?

    It's an extremely difficult task to look through a big piece of code, looking for errors that may not even be there. It's completely different from knowing that there's something wrong and finding the source of that problem.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •