too many markers

[email protected] Fri, 17 Apr 2009 00:15:16 -0700

HI,

I used a GMarkerManager to show over 900 markers on the map. The map
is fine,
however, it is a little bit slow, is there anyway I can improve the
speed?


here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"; xmlns:v="urn:schemas-
microsoft-com:vml">
<head>
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="PRAGMA" content="NO-CACHE">
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="http://maps.google.com/maps?
file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAqigkiSlWCcz0JkHpgzr3fBQQsbFgeL2lURyB9yI3aX8hGtQBEhQz9y2WtP9eIzfSVOwvTqmb8e5QUA"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* A lot of the code is taken from other tutorials. */

function createMarker(point,html,icon) {
        var marker = new GMarker(point, {icon:icon});
        GEvent.addListener(marker, "click", function()
        { marker.openInfoWindowHtml(html); });
        return marker;
        }
function getMarks(url) { /* pass url during the call. */
        map.closeInfoWindow(); /*close any InfoWindows that happen to be
open  */
        map.clearOverlays();
        var gmarkers = [];
        var gdistrict = [];
        var apart = [];
        var request = GXmlHttp.create(); /* use the XML methods  */
        request.open("GET", url, true);
        request.onreadystatechange = function() {
        if (request.readyState == 4)
                {
                        var xmlDoc = request.responseXML; /* php returns 'XML' 
*/
                        var markers = 
xmlDoc.documentElement.getElementsByTagName
("marker");
                        for (var loop1=0;loop1<markers.length;loop1++)
                        {
                                var lat = 
parseFloat(markers[loop1].getAttribute("lat"));
                                var lng = 
parseFloat(markers[loop1].getAttribute("lng"));
                                var point = new GLatLng(lat,lng);
                                var type = markers[loop1].getAttribute("type");
                                var html = "";
                                if (type=="building")
                                {
                                        var pid = 
markers[loop1].getAttribute("pid");
                                        var name = 
markers[loop1].getAttribute("name");
                                        var street = 
markers[loop1].getAttribute("street");
                                        var district = 
markers[loop1].getAttribute("district");
                                        var layout = 
markers[loop1].getAttribute("layout");
                                        var rental = 
markers[loop1].getAttribute("rental");
                                        var size = 
markers[loop1].getAttribute("size");
                                        var year = 
markers[loop1].getAttribute("year");
                                        var proptype = 
markers[loop1].getAttribute("proptype");
                                        var photo = 
markers[loop1].getAttribute("photo");
                                        photo = '<img src="'+photo+'" 
width="134" height="123">';

html = '<div style="position:relative;top:0px;left:0px;width:
295px;height:123px">';
html+= '<div style="position:absolute;top:0px;left:0px;width:
134px;height:123px;border: 1px solid #edeae2">'+photo+'</div>';
html+= '<div style="position:relative;top:0px;left:140px;width:
155px;height:123px">';
html+= '<span class="bluetxt">'+name+'</span><br>';
html+= street+'<br>';
html+='<span class="search_details_subhead">'+proptype+'</span><br>';
html+= '<table cellpadding="0" cellspacing="0" width="155"
style="margin-top:5px"><tr>';
html+= '<td><span style="color:#006699">Rental: </span></
td><td>'+rental+'</td></tr><tr>';
html+= '<td><span style="color:#006699">Layout: </span></
td><td>'+layout+'</td></tr><tr>';
html+= '<td><span style="color:#006699">Size: </span></td><td>'+size
+'</td></tr></table>';
html+= '<div style="margin-top:5px;text-align:right;width:155px;"><a
href="http://www.colliershomes.com/highlighted_property_details.php?
distid='+district+'&pagetoback=property_highlights&property='+pid+'"
style="font-size:14px; color:#cc0033"><b>Detail</b></a></div>';
html+= '</div></div>';

                                        var marker = 
createMarker(point,html,bicon);
                                        gmarkers.push(marker);
                                }
                                if (type=="district")
                                {
                                        var name = 
markers[loop1].getAttribute("name");
                                        var district = 
markers[loop1].getAttribute("district");
                                        var photo = 
markers[loop1].getAttribute("photo");
html = '<div style="width:222px;height:155px;">';
html+= '<table cellpadding="0" cellspacing="0" width="222"><tr>';
html+= '<td class="bluetxt"><b>'+name+'</b></td><td align="right">';
html+= '<a href="http://www.colliershomes.com/quick_facts.php?
district='+district+'" style="font-size:12px;
color:#cc0033"><b>Detail</b></a>&nbsp;&nbsp;</td></tr></table>';
html+= '<div style="border: 1px solid #edeae2;width:222px;height:
135px;"><img src="'+photo+'" width="222" height="135"><br></div>';
html+= '</div>';

                                        var marker = 
createMarker(point,html,dicon);
                                        gdistrict.push(marker);
                                }
                                if (type=="sa")
                                {
                                        var name = 
markers[loop1].getAttribute("name");
                                        var district = 
markers[loop1].getAttribute("district");
                                        var street = 
markers[loop1].getAttribute("street");
                                        var rental = 
markers[loop1].getAttribute("rental");
                                        var size = 
markers[loop1].getAttribute("size");
                                        var ref = 
markers[loop1].getAttribute("ref");
                                        var photo = 
markers[loop1].getAttribute("photo");
                                        photo = '<img src="'+photo+'" 
width="134" height="123">';

html = '<div style="position:relative;top:0px;left:0px;width:
295px;height:123px">';
html+= '<div style="position:absolute;top:0px;left:0px;width:
134px;height:123px;border: 1px solid #edeae2">'+photo+'</div>';
html+= '<div style="position:relative;top:0px;left:140px;width:
155px;height:123px">';
html+= '<span class="bluetxt">'+name+'</span><br>';
html+= street+'<br>';
html+= '<table cellpadding="0" cellspacing="0" width="155"
style="margin-top:5px"><tr>';
html+= '<td><span style="color:#006699">Rental: </span></
td><td>'+rental+'</td></tr><tr>';
html+= '<td><span style="color:#006699">Size: </span></td><td>'+size
+'</td></tr></table>';
html+= '<div style="margin-top:5px;text-align:right;width:155px;"><a
href="http://www.colliershomes.com/apartment_details.php?apartid='+ref
+'&prop_or_apart=service&pagetoback=search_property" style="font-size:
14px; color:#cc0033"><b>Detail</b></a></div>';
html+= '</div></div>';
                                        var marker = 
createMarker(point,html,aicon);
                                        apart.push(marker);
                                }
                        }
                        var mm = new GMarkerManager(map, {borderPadding:1});
                        mm.addMarkers(gdistrict,12,17);
                        mm.addMarkers(apart,12,17);
                        mm.addMarkers(gmarkers,13,17);
                        mm.refresh();
                        om.Clear();
                }
                };
        request.send(null);
}
//]]>


</script>
</head>
<body onunload="GUnload();" style="background-color:#fff">
<table border=1 >
<tr>
<td>
<input type="button" value="building" onclick='getMarks("getMap.php?
selection=building")';>
<br />
<input type="button" value="district" onclick='getMarks("getMap.php?
selection=district");'>
<br />
<input type="button" value="SA" onclick='getMarks("getMap.php?
selection=sa");'>


</td><td> <div id="map" style="width:600px;height:350px;"></div></td></
tr>

</table>
<br />
<br />
<br />
<br />
<br />
<br />
<noscript>
<p>
JavaScript must be enabled in order for you to use Google Maps.
  However, it seems JavaScript is either disabled or not supported by
your browser.
  To view Google Maps, enable JavaScript by changing your browser
options, and then
  try again.
</p>
</noscript>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
        var aicon = new GIcon();
    aicon.image = "http://www.colliershomes.com/images/icon28.png";;
    aicon.shadow = "http://www.colliershomes.com/images/icon28s.png";;
    aicon.iconSize = new GSize(32, 32);
    aicon.shadowSize = new GSize(59, 32);
    aicon.iconAnchor = new GPoint(6, 20);
    aicon.infoWindowAnchor = new GPoint(5, 1);
    var bicon = new GIcon();
    bicon.image = "http://www.colliershomes.com/images/icon56.png";;
    bicon.shadow = "http://www.colliershomes.com/images/icon56s.png";;
    bicon.iconSize = new GSize(32, 32);
    bicon.shadowSize = new GSize(59, 32);
    bicon.iconAnchor = new GPoint(6, 20);
    bicon.infoWindowAnchor = new GPoint(5, 1);
        var dicon = new GIcon();
        dicon.image = "http://www.colliershomes.com/images/districticon.png";;
        dicon.shadow = "http://www.colliershomes.com/images/
districticons.png";
    dicon.iconSize = new GSize(36, 23);
    dicon.shadowSize = new GSize(48, 23);
    dicon.iconAnchor = new GPoint(6, 23);
    dicon.infoWindowAnchor = new GPoint(15, 1);

        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        var centerpoint = new GLatLng(22.270445,114.19116);
        var zoomlevel=12;
        map.setCenter(centerpoint, zoomlevel);
        //GEvent.addListener(map, 'click' , function( overlay,point) {
        //if (point) { alert(point  ); }
        //});
        getMarks("getMap.php?selection=building");  //call function that
retrieves the marks
}
    else {
      alert("Sorry, the Google Maps API is not compatible with this
browser");
    }

    //]]>
</script>
</body>
</html>


getMap.php
<?
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("content-type:text/xml");
require_once("include/function.php");
$name=$_GET['selection'];

echo "<markers>";
switch($name)
{
        case "district":
                $sql = "select districtname, districtid, lat,lng from district";
                $result = mysql_query($sql, db_connect());
                while ($row=mysql_fetch_array($result))
                {
                        $foto = 
'images/quickfacts/'.$row['districtid'].'_1.jpg';
                        $Foto = 
'images/quickfacts/'.$row['districtid'].'_1.JPG';
                        if (file_exists($foto)) $photo = $foto;
                        elseif (file_exists($Foto)) $photo = $Foto;
                        else $photo = 'images/quickfacts/noDistrict.gif';
                        $line ='<marker type="district" lat="'.$row['lat'].'" 
lng="'.$row
['lng'].'" name="'.$row['districtname'].'" district="'.$row
['districtid'].'" photo="'.$photo.'"/>';
                        echo $line;
                }
                break;
        case "building":
                $sql = "select highlightid,
District,ref,PropertyNameLong,layoutrange,rantalrange,sizerange,yearbulit,proptype,StreetName,lat,lng
from property_highlight";
                $result = mysql_query($sql, db_connect());
                while ($row=mysql_fetch_array($result))
                {
                        $name = changeName($row['PropertyNameLong']);
                        $id = $row['highlightid'];
                        $district =$row['District'];
                        $ref = $row['ref'];
                        $layout = $row['layoutrange'];
                        $rental = $row['rantalrange'];
                        $size = $row['sizerange'];
                        $year = $row['yearbulit'];
                        $proptype = $row['proptype'];
                        $StreetName = changeName($row['StreetName']);
                        $lat = $row['lat'];
                        $lng = $row['lng'];
                        $year = strlen($year)==0? "N/A" : $year;
                        //check photo
                        $foto = 
"buliding_photos/".$row['District']."/".$ref."/1.jpg";
                        $Foto = 
"buliding_photos/".$row['District']."/".$ref."/1.JPG";
                        $foto13 = 
"buliding_photos/".$row['District']."/".$ref."/
134x123_1.JPG";
                        if (file_exists($foto13)) $photo = $foto13;
                        elseif (file_exists($foto)) $photo = $foto;
                        elseif (file_exists($Foto)) $photo = $Foto;
                        else $photo = '/images/nophoto130.gif';

                        $line = '<marker type="building" ';
                        $line.= 'lat="'.$lat.'" lng="'.$lng.'" pid="'.$id.'" ';
                        $line.= 'name="'.$name.'" street="'.$StreetName.'" 
district="'.
$district.'" ';
                        $line.= 'layout="'.$layout.'" rental="'.$rental.'" 
size="'.$size.'"
';
                        $line.= 'year="'.$year.'" proptype="'.$proptype.'" 
photo="'.
$photo.'" />';
                        echo $line;
                }
                break;
        case "sa":
                $sql = "select
a.ref,a.PropertyID,a.apart_name,a.address,a.district,a.SizeFrom,a.SizeTo,a.RentalFrom,a.RentalTo,p.lat,p.lng
from apartment a inner join property p on a.PropertyID =
p.PropertyID";
                $result = mysql_query($sql, db_connect());
                while ($row=mysql_fetch_array($result))
                {
                        $name = $row['apart_name'];
                        $ref = $row['ref'];
                        $street = $row['address'];
                        $district = $row['district'];
                        $size = $row['SizeFrom']."-".$row['SizeTo']." sq ft";
                        $rental = "HK$ 
".$row['RentalFrom']."-".$row['RentalTo'];
                        $lat = $row['lat'];
                        $lng = $row['lng'];

                        $foto = "buliding_photos/".$district."/".$ref."/1.jpg";
                        $Foto = "buliding_photos/".$district."/".$ref."/1.JPG";
                        $foto13 = 
"buliding_photos/".$district."/".$ref."/134x123_1.JPG";
                        if (file_exists($foto13)) $photo = $foto13;
                        elseif (file_exists($foto)) $photo = $foto;
                        elseif (file_exists($Foto)) $photo = $Foto;
                        else $photo = '/images/nophoto130.gif';

                        $line = '<marker type="sa" ';
                        $line.= 'lat="'.$lat.'" lng="'.$lng.'" ref="'.$ref.'" ';
                        $line.= 'name="'.$name.'" street="'.$street.'" 
district="'.
$district.'" ';
                        $line.= 'rental="'.$rental.'" size="'.$size.'" ';
                        $line.= 'photo="'.$photo.'" />';
                        echo $line;
                }
                break;

        default: break;
}


echo "</markers>";

function changeName($name)
{
                        if(strpos($name, "'") != false)
                        {
                                $pos = strpos($name, "'");
                                $name = 
substr_replace($name,'&acute;'.substr($name,($pos+1)),
$pos);
                        }
                        if(strpos($name, '"') != false)
                        {
                                $pos = strpos($name, '"');
                                $name = 
substr_replace($name,'&acute;'.substr($name,($pos+1)),
$pos);
                        }

                        if(strpos($name, '&') != false)
                        {
                                $pos = strpos($name, '&');
                                $name = 
substr_replace($name,'&amp;'.substr($name,($pos+1)),$pos);
                        }
                        if(strpos($name, '/') != false)
                        {
                                $pos = strpos($name, '/');
                                $name = 
substr_replace($name,'&frasl;'.substr($name,($pos+1)),
$pos);
                        }
                        return $name;
}
?>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to 
[email protected]
For more options, visit this group at 
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---

too many markers

Reply via email to