Custom Google Maps Markers and Infowindow

Question

I want to create a google map in which the markers I want to show are coming from database and the infowindow data comes from database as well which is different for each marker obviously. Code that I am using now is:

    <script type="text/javascript">
        var delay = 100;
        var infowindow = new google.maps.InfoWindow();
        var latlng = new google.maps.LatLng(21.0000, 78.0000);
        var mapOptions = {
            zoom: 5,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var geocoder = new google.maps.Geocoder();
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var bounds = new google.maps.LatLngBounds();

        function geocodeAddress(address, next) {
            geocoder.geocode({address:address}, function (results,status){
                if (status == google.maps.GeocoderStatus.OK) {
                    var p = results[0].geometry.location;
                    var lat=p.lat();
                    var lng=p.lng();
                    createMarker(address,lat,lng);
                }else {
                    if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                        nextAddress--;
                        delay++;
                    } else {}
                }
                next();
            });
        }

        function createMarker(add,lat,lng) {
            var contentString = add;
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat,lng),
                map: map
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(contentString);
                infowindow.open(map,marker);
            });

            bounds.extend(marker.position);

        }

        <?php
            global $wpdb;
            $results = $wpdb->get_results("select * from $wpdb->postmeta where meta_value = 'Canada'");
            $num_rows = $wpdb->num_rows;
        ?>
            var locations = [
            <?php foreach ($results as $doc_meta_data) {
                echo "'";// . $doc_meta_data->meta_id;
                echo get_post_meta($doc_meta_data->post_id, 'address', true).",";
                echo get_post_meta($doc_meta_data->post_id, 'state', true).",";
                echo get_post_meta($doc_meta_data->post_id, 'country', true);
                echo "',";
            }?>
            ];

            var nextAddress = 0;
                function theNext() {
                    if (nextAddress < locations.length) {
                        setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
                        nextAddress++;
                    } else {
                        map.fitBounds(bounds);
                    }
                }
            theNext();
    </script>

How can I add make each markers info dynamic ie, it should come from the admin panel. URL:http://intigateqatar.com/ozone/find-a-doc/

Answer 1

You need to create infowindow in createMarker() function in order infowindows to be unique for each marker:

function createMarker(add,lat,lng) {
    var contentString = add;
    var marker = new google.maps.Marker({
       position: new google.maps.LatLng(lat,lng),
       map: map
    });

    var infowindow = new google.maps.InfoWindow({
       content: contentString
    });

    google.maps.event.addListener(marker, 'click', function() {
       infowindow.open(map, marker);
    });

    bounds.extend(marker.position);
}

Answer 2

The InfoWindow's on the linked page have dynamic content(currently the address), I guess you don't need the address as content.

Currently the locations-array has the following structure.

[address1,address2,address3,....]

Request the infos and create an array with this structure:

[[address1,info1],[address2,info2],[address3,info3],....]

Change geocodeAddress() into the following:

 function geocodeAddress(details, next) {
        //details[0] is the address, pass it as address-property to geocode
        geocoder.geocode({address:details[0]}, function (results,status){
            if (status == google.maps.GeocoderStatus.OK) {
                var p = results[0].geometry.location;
                var lat=p.lat();
                var lng=p.lng();
                //details[1] is the info fetched from the DB, 
                //pass it as add-argument to createMarker()
                createMarker(details[1],lat,lng);
            }else {
                if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    nextAddress--;
                    delay++;
                } else {}
            }
            next();
        });
    }

Note: echoing the single variables is not a good idea , a single-quote in either address(or the info) will result in a script-error(and there are more critical characters, e.g. linebreaks).

Populate a PHP-array with the values and use json_encode() to print the array.