Custom Icons not showing up on google maps_问答_开发者

The problem I am having is only that I cannot get the custom icons to load. The markers themselves load but just with the default icon. I can get the custom icons to load if I set the icon: type manually in the marker object like this:

        var marker = new google.maps.Marker({
            position: places[i],
            map: map,
            icon: sizeIcons['one']
        })

Then they all load just fine. But I wanted to set the size so I added the code below which works in my KML generator but for some reason will not work to produce my custom icons. Any ideas why? I did not post all the code but the value of $content[1] is a number between 50 and 450.

index.html

$sizeFloat = (int) $content[1];
                    if($sizeFloat  < 50){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['one']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 50 && $sizeFloat < 70){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['two']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 70 && $sizeFloat < 75){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['three']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 75 && $sizeFloat < 88){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['four']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 88 && $sizeFloat < 100){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['five']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 100 && $sizeFloat < 125){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['six']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 125 && $sizeFloat < 150){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['seven']);
                        </script>
                        <?php

                    }
                    if($sizeFloat >= 150 && $sizeFloat < 17开发者_如何学Python5){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['eight']);
                        </script>
                        <?php

                    }
                    if($sizeFloat >= 175 && $sizeFloat < 200){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['nine']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 200 && $sizeFloat < 250){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['ten']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 250 && $sizeFloat < 275){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['eleven']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 275 && $sizeFloat < 350){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['twelve']);
                        </script>
                        <?php
                    }
                    if($sizeFloat >= 350){
                        ?>
                        <script type="text/javascript">
                            markerType.push(sizeIcons['thirteen']);
                        </script>
                        <?php
                    }

                    if ($content !== false) {
                    ?>
                        <script type="text/javascript">                             
                            places.push(new google.maps.LatLng(<?php echo json_encode($content[5]); ?>, <?php echo json_encode($content[6]); ?>));  
                        </script>
                    <?php           
                    }
                    $id = $id + 1;
                }       
                fclose($file);
            }
        ?>
    <script type="text/javascript" src="js/map.js"></script>

map.js

(function() {
    // Creating a variable that will hold the InfoWindow object
    var infowindow;
    // Creating an array that will contain all the size icons
    var sizeIcons = [];
    sizeIcons['one'] = new google.maps.MarkerImage(
        'images/25.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['two'] = new google.maps.MarkerImage(
        'images/50.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['three'] = new google.maps.MarkerImage(
        'images/70.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['four'] = new google.maps.MarkerImage(
        'images/75.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['five'] = new google.maps.MarkerImage(
        'images/88.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['six'] = new google.maps.MarkerImage(
        'images/100.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['seven'] = new google.maps.MarkerImage(
        'images/125.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['eight'] = new google.maps.MarkerImage(
        'images/150.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['nine'] = new google.maps.MarkerImage(
        'images/175.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['ten'] = new google.maps.MarkerImage(
        'images/200.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['eleven'] = new google.maps.MarkerImage(
        'images/250.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['twelve'] = new google.maps.MarkerImage(
        'images/275.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );
    sizeIcons['thirteen'] = new google.maps.MarkerImage(
        'images/425.png',
        new google.maps.Size(48, 48),
        null,
        new google.maps.Point(24, 24)
    );

    window.onload = function() {
        // Creating an object literal containing the properties
        // we want to pass to the map
        var options = {
            zoom: 5,
            center: new google.maps.LatLng(39.09, -95.71),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Creating the map
        var map = new google.maps.Map(document.getElementById('map'), options);
        // Creating a LatLngBounds object
        var bounds = new google.maps.LatLngBounds();

        // Creating a variable that will hold
        // the InfoWindow object
        var infowindow;
        // Looping through the places array
        for (var i = 0; i < places.length; i++) {
            // Adding the markers
            var marker = new google.maps.Marker({
                position: places[i],
                map: map,
                icon: markerType[i]
            });
            // Wrapping the event listener inside an anonymous function
            // that we immediately invoke and passes the variable i to.
            (function(i, marker) {
                // Creating the event listener. It now has access to the values of
                // i and marker as they were during its creation
                google.maps.event.addListener(marker, 'click', function() {
                // Check to see if we already have an InfoWindow
                if (!infowindow) {
                    infowindow = new google.maps.InfoWindow();
                }
                // Setting the content of the InfoWindow
                infowindow.setContent('Place number ' + i);
                // Tying the InfoWindow to the marker
                infowindow.open(map, marker);
                });
            })(i, marker);
            // Extending the bounds object with each LatLng
            bounds.extend(places[i]);
        }
        // Adjusting the map to new bounding box
        map.fitBounds(bounds)
    };
})();

I'm not certain, but it may be due to your lack of origin point: new google.maps.Point(0,0) Where you currently pass in null. Normally, when you just pass an image URL to as icon, the maps API will create the MarkerImage object for you and default this information and determine height & width automatically. I'm guessing you want your icons to align to the center point since your anchor points are at 24,24. But you probably need to define an origin point even though it's 0,0.

You could use a sprite for these since google gives you the ability to use a single image and multiple 'squares' within that image as different points. So let's say you have a 100 by 100 pixel image. Within this image you can have 4 50x50 icons arranged in a grid. So one MarkerImage could be from 0,0 to 50,50, and the next in that row would be 0,50 to 100,50. And so on for the second row.