Can't Change Marker Icon in Google Maps API

Question

I created a map using Google Fusion Tables, and have uploaded the map into an HTML document, which I am tweaking to make subtle changes in the appearance of the map. I figured out how to insert a draggable pin/marker that displays a street view of its current location on click, but I can't figure out how to change the appearance of the marker. Here is the code I have for the interactive streetview marker.

        //street view pin
        var contentString = '<div id="content" style="width:500px;height:400px;"></div>';
        var infowindow = new google.maps.InfoWindow({
        content: contentString
        });

        var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Click Here for Street View',
        draggable: true
        });

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

        var pano = null;
        google.maps.event.addListener(infowindow, 'domready', function() {
        if (pano != null) {
        pano.unbind("position");
        pano.setVisible(false);             }
        pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
        nableCloseButton: false,
        addressControl: false,
        linksControl: false
        });
        pano.bindTo("position", marker);
        pano.setVisible(true);
        });

        google.maps.event.addListener(infowindow, 'closeclick', function() {
        pano.unbind("position");
        pano.setVisible(false);
        pano = null;
        });

I tried to tweak the lines 7-14, adding in a

    icon: 'cross_hairs_highlight'

which is the style i want, but the icon disappears when I try to open the HTML document in a browser. There is still something there that I can still drag around and click on for StreetView, but it's invisible.

Any suggestions?

Your help is appreciated!!!

JH

Answer 1

The value of icon is expected to be a URL, not the name of a fusionTable-icon (these icon-names may only be used for markers rendered within a fusionTableLayer).

You'll find a list of these icons (inspect the image-properties to retrieve the URL) at http://kml4earth.appspot.com/icons.html , so you may use e.g.:

icon:'http://maps.google.com/mapfiles/kml/pal3/icon52.png'

When you want the marker to be centered at the given position, you must also specify the anchor:

icon:{
       url:    'http://maps.google.com/mapfiles/kml/pal3/icon52.png',
       anchor: new google.maps.Point(16,16)
     }