Google Map API 3

[MaddTechwf]

I've followed Googles article here and having a working map on my XAMPP installation.

I'm trying to take it a bit further and I want to use the "type" attribute from the database to show only specific markers based on the buttons that I have. I have a list of buttons that relate to a specific "type" that a point can have.

Can anyone help me with this?

[diafol]

Could you show your code?

If I understand you, you have a series of buttons, e.g. labelled "bars","restaurants","clubs"... or even "$","$$","$$$" or whatever and you want to 'filter' the DB to just providing the markers of type specified by the last button click.

If so, an alternative would be the use of checkboxes, so that multiple choices could be included. Just a thought. BTW - checkboxes can be styled to look like toggle buttons.

[MaddTechwf]

This is the code that I got directly from Google.

<script type="text/javascript">
        //<![CDATA[

        var customIcons = {
            restaurant: {
                icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
            },
            bar: {
                icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
            }
        };

        function load() {
            var map = new google.maps.Map(document.getElementById("map-canvas"), {
                center: new google.maps.LatLng(33.87410, -98.52128),
                //center: new google.maps.LatLng(47.6145, -122.3418),
                zoom: 16,
                //zoom: 13,
                mapTypeId: 'roadmap'
            });

            var infoWindow = new google.maps.InfoWindow;

            // Change this depending on the name of your PHP file
            downloadUrl("phpqlajax_genxml2.php", function(data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                    var name = markers[i].getAttribute("name");
                    var address = markers[i].getAttribute("address");
                    var phone = markers[i].getAttribute("phone");
                    var type = markers[i].getAttribute("type");
                    var point = new google.maps.LatLng(
                        parseFloat(markers[i].getAttribute("lat")),
                        parseFloat(markers[i].getAttribute("lng")));
                    var html = "<div class='title'>" + name + 
                                "</div><div class='basicinfo'><div class="addr'>" + address + 
                                "</div><div class='website'></div><div class='phone'>" + phone + 
                                "</div>";
                    var icon = customIcons[type] || {};
                    var marker = new google.maps.Marker({
                        map: map,
                        position: point,
                        icon: icon.icon
                    });
                    bindInfoWindow(marker, map, infoWindow, html);
                }
            });
        }

        function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
            });
        }

        function downloadUrl(url, callback){
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function() {
                if (request.readyState == 4) {
                    request.onreadystatechange = doNothing;
                    callback(request, request.status);
                }
            };

            request.open('GET', url, true);
            request.send(null);
        }

        function doNothing() {}

        //]]>       
    </script>

My database page create's an XML page (phpqlajax_genxml2.php) that the above code looks at to populate the map.

[diafol]

I would set a querystring for phpqlajax_genxml.php, e.g.

phpqlajax_genxml.php?filter=2
phpqlajax_genxml.php?filter=2;4
phpqlajax_genxml.php?filter=1;3;6;7

WHere the number is the id of the "type". The first example could be a typical button push, the others from checkboxes (multiple types)

//get data into filter variable from form submit or button press or checkbox change
queryUrl = (filter) ? url +  '?filter=' + filter : url; 
downloadUrl(queryUrl);

In your php get the 'GET':

if(isset($_GET['filter'])
{
    //this means you check for the id values and use them in an SQL statement to filter out your markers before creating the xml. This is as simple as appending a WHERE clause to the original SQL statement. 
}

[MaddTechwf]

@diafol - Thanks for the repsonses. I don't deal a whole lot in js or jquery so a lot of things are still confusing to me.

Your example above confused me.

[diafol]

There's no jQuery there, just a couple of extra lines of js and then some php that you can include in the phpqlajax_genxml.php file.