custom google map marker - javascript & php

Question

Hi Everyone,

here is my code - I've tried using the google maps api and other tutorials, but I can't seem to get the code right. It either displays the default icon or no icon at all.

Here is the unaltered code -

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

                    <?php if ($er_imglayout == 4 && $row->image2) { ?>
                        function domap()
                    <?php } else { ?>
                        function ezrealtymap()
                    <?php } ?>
                    {
                        // Check to see if this browser can run the Google API
                        if (GBrowserIsCompatible()) {

                            gmarkers = [];
                            htmls = [];
                            to_htmls = [];
                            from_htmls = [];
                            i=0;


                            // Display the map, with some controls and set the initial location 
                            var map = new GMap2(document.getElementById("map"));
                            map.addControl(new GLargeMapControl());
                            map.addControl(new GMapTypeControl());
                            map.setCenter(new GLatLng( <?php echo $row->declat;?>,<?php echo $row->declong;?>), <?php echo $er_mapres;?>);
                            map.setMapType(<?php echo $er_mapview;?>);

                            // Set up three markers with info windows 

                            var point = new GLatLng( <?php echo $row->declat;?>,<?php echo $row->declong;?>);
                            var marker = createMarker(point,"<?php echo stripslashes($row->adline);?>","<?php echo stripslashes($row->adline);?>")
                            map.addOverlay(marker);

                        } else {

                            // display a warning if the browser was not compatible

                            alert("<?php echo _EZREALTY_MAPPING_INCOMPATIBLE;?>");
                        }
                    }

                    // This Javascript is based on code provided by the
                    // Blackpool Community Church Javascript Team
                    // http://www.commchurch.freeserve.co.uk/   
                    // http://www.econym.demon.co.uk/googlemaps/

                    //]]>

                    // A function to create the marker and set up the event window

                    function createMarker(point,name,html) {
                        var marker = new GMarker(point);

                        // The info window version with the "to here" form open

                        to_htmls[i] = html + '<br /><?php echo _EZREALTY_MAP_DIRECTIONS;?>: <strong><?php echo _EZREALTY_MAP_TOHERE;?></strong> - <a href="javascript:fromhere(' + i + ')"><?php echo _EZREALTY_MAP_FROMHERE;?></a>' +
                        '<br /><?php echo _EZREALTY_MAP_START;?>:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
                        '<input type="text" size="40" maxlength="40" name="saddr" id="saddr" value="" /><br />' +
                        '<input value="<?php echo _EZREALTY_MAP_DIRECTIONS;?>" type="submit">' +
                        '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
                        // "(" + name + ")" + 
                        '"/>';

                        // The info window version with the "to here" form open

                        from_htmls[i] = html + '<br /><?php echo _EZREALTY_MAP_DIRECTIONS;?>: <a href="javascript:tohere(' + i + ')"><?php echo _EZREALTY_MAP_TOHERE;?></a> - <strong><?php echo _EZREALTY_MAP_FROMHERE;?></strong>' +
                        '<br /><?php echo _EZREALTY_MAP_END;?>:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
                        '<input type="text" size="40" maxlength="40" name="daddr" id="daddr" value="" /><br />' +
                        '<input value="<?php echo _EZREALTY_MAP_DIRECTIONS;?>" type="submit">' +
                        '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                        // "(" + name + ")" + 
                        '"/>';

                        // The inactive version of the direction info

                        html = html + '<br /><?php echo _EZREALTY_MAP_DIRECTIONS;?>: <a href="javascript:tohere('+i+')"><?php echo _EZREALTY_MAP_TOHERE;?></a> - <a href="javascript:fromhere('+i+')"><?php echo _EZREALTY_MAP_FROMHERE;?></a>';

                        GEvent.addListener(marker, "click", function() {
                            marker.openInfoWindowHtml(html);
                        });
                        gmarkers[i] = marker;
                        htmls[i] = html;
                        i++;
                        return marker;
                    }

                    // functions that open the directions forms
                    function tohere(i) {
                        gmarkers[i].openInfoWindowHtml(to_htmls[i]);
                    }
                    function fromhere(i) {
                        gmarkers[i].openInfoWindowHtml(from_htmls[i]);
                    }

                    </script>

Answer 1

Humm sorry - now I understand. I guess you're missing a part of the marker generation process. This is how I create custom markers and add them to the map.

var niceIcon = new GIcon();
niceIcon.image = '/images/Maps/icon/image.png';
niceIcon.shadow = '/images/Maps/icon/shadow.png';
niceIcon.iconSize = new GSize(34, 38);
niceIcon.shadowSize = new GSize(53, 38);
niceIcon.iconAnchor = new GPoint(0, 38);
niceIcon.infoWindowAnchor = new GPoint(17, 0);
niceIcon.printImage = '/images/Maps/icon/printImage.gif';
niceIcon.mozPrintImage = '/images/Maps/icon/mozPrintImage.gif';
niceIcon.printShadow = '/images/Maps/icon/printShadow.gif';
niceIcon.transparent = '/images/Maps/icon/transparent.png';
niceIcon.imageMap = [27, 0, 27, 1, 27, 2, 27, 3, 27, 4, 27, 5, 27, 6, 27, 7, 27, 8, 27, 9, 27, 10, 27, 11, 27, 12, 27, 13, 27, 14, 27, 15, 27, 16, 27, 17, 27, 18, 27, 19, 27, 20, 33, 21, 33, 22, 33, 23, 33, 24, 32, 25, 32, 26, 31, 27, 30, 28, 31, 29, 30, 30, 30, 31, 17, 32, 19, 33, 18, 34, 15, 35, 15, 36, 14, 37, 13, 37, 13, 36, 12, 35, 11, 34, 11, 33, 10, 32, 3, 31, 3, 30, 3, 29, 3, 28, 0, 27, 0, 26, 0, 25, 0, 24, 0, 23, 0, 22, 0, 21, 0, 20, 0, 19, 0, 18, 0, 17, 0, 16, 0, 15, 0, 14, 0, 13, 0, 12, 0, 11, 0, 10, 0, 9, 0, 8, 0, 7, 0, 6, 0, 5, 0, 4, 0, 3, 0, 2, 0, 1, 0, 0];

var markerOptions = { icon: niceIcon };

var point = new GLatLng(lat, lon);
var marker = new GMarker(point, markerOptions);
map.addOverlay(marker);