Google地图中的编号/单个标记

Question

I'm working on creating a list of venues for an upcoming festival and would like each labelled with an individual marker image. While I've got all other aspects of the map working I can't seem to assign the individual marker image in the array of venues.

This is what I have:

function initialize() {
var styles = [
{ 
    "featureType": "poi", 
    "elementType": "geometry", 
    "stylers": [ { "visibility": "on" }, { "color": "#f5f5f5" } ] },

    { "featureType": "landscape.natural", 
    "stylers": [ { "visibility": "on" }, { "invert_lightness": true }, { "color": "#dadad9" } ] },

    { "featureType": "landscape.man_made", 
    "stylers": [ { "visibility": "off" }, { "color": "#ebebeb" } ] },

    { "featureType": "road.arterial", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] },

    { "featureType": "road.arterial", "elementType": "labels.text", 
    "stylers": [ { "saturation": -100 }, { "gamma": 3.31 }, { "weight": 0.1 } ] },

    { "featureType": "road.arterial", "elementType": "labels.stroke", 
    "stylers": [ { "visibility": "off" } ] },



    { "featureType": "road.highway", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] },

    { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "simplified" } ] },

    { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },


    { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" } ] },

    { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] },



    { "featureType": "road.local", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] },

    { "featureType": "road.local", "elementType": "labels", "stylers": [ { "visibility": "simplified" } ] },

    { "featureType": "road.local", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },

    { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" } ] },



    { "featureType": "water", 
    "stylers": [ { "color": "#646464" } ] },

    { "featureType": "poi.business",
    "stylers": [ { "visibility": "on" } ] },

    { "featureType": "transit.line", "elementType": "labels.text",
    "stylers": [ { "color": "#eeccff" }, { "visibility": "simplified" } ] }, 

    { "featureType": "transit.line", "elementType": "geometry.fill",
    "stylers": [ { "visibility": "on" }, { "color": "#ff8080" } ] },

    {
"featureType": "poi",
"stylers": [
  { "visibility": "off" }
]
},

{
"featureType": "administrative",
"stylers": [
  { "visibility": "off" }
]
},

{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
  { "visibility": "on" },
  { "color": "#e6e6e6" }
]
}
]


// STYLE
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});


var homePoint = new google.maps.LatLng(53.34729785,-6.25924587),
     markers,
        myMapOptions = {
         zoom: 15,
        center: homePoint,
        disableDefaultUI: false,
        zoomControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

    // var image = 'marker.png';
    // var myLatLng = new google.maps.LatLng(53.34457415, -6.26930952);
    // var Marker = new google.maps.Marker({
    // position: myLatLng,
    // map: map,
    // icon: image
    // });

    // var image = 'theatre_04.png';
    // var theLatLng = new google.maps.LatLng(52.34457415, -6.26930952);
    // var Marker = new google.maps.Marker({
    // position: theLatLng,
    // map: map,
    // title: 'Click to zoom',
    // icon: image,
    // address: "Abbey Theatre, 26 Lwr Abbey St, Dublin 1",
    // tel: "+353 1 878 7222",
    // link: "http://www.abbeytheatre.ie"
    // });


// Marker style 1

function initMarkers(map, markerData) {
    var newMarkers = [],
        marker;

        var newMarker = new google.maps.MarkerImage('theatre_01.png',
        new google.maps.Size(30,30),
        new google.maps.Point(0,0)
    );



        for(var i=0; i<markerData.length; i++) {
        marker = new google.maps.Marker({
            map: map,
            // icon: newMarker,
            draggable: false,
            position: markerData[i].latLng,
            visible: true,
            labelContent: i,
            labelClass: "labels"
        }),


        boxText = document.createElement("div"),
        //INFOBOX STYLE
        infoboxOptions = {
             content: boxText,
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(0, 0),
            zIndex: null,
            boxStyle: {
                opacity: 0.75,
                width: "150px"
            },
            closeBoxMargin: "5px",
            closeBoxURL: "close.png",
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };



        // add a click listener to the marker
        google.maps.event.addListener(marker, 'click', function() {
        // reference clicked marker
        var curMarker =  this;
        // loop through all markers
        $.each(markers, function(index, marker) {
        // if marker is not the clicked marker, close the marker
        if(marker !== curMarker) {marker.infobox.close();}
        });
    });


        newMarkers.push(marker);

        //INFOBOX TEMPLATE
        boxText.style.cssText = "background:#fff; color:#000; padding: 20px;";
        boxText.innerHTML = "<a target='_blank' href='" + markerData[i].link + "'>" + markerData[i].tel + "<br/>" + markerData[i].address + "</a>";
        newMarkers[i].infobox = new InfoBox(infoboxOptions);
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                newMarkers[i].infobox.open(map, this);
                map.panTo(markerData[i].latLng);
            }
        })(marker, i));
    }

    return newMarkers;
}


    //MARKERS ARRAY
    markers = initMarkers(map, [

    { latLng: new google.maps.LatLng(53.3485401, -6.257107), address: "Abbey Theatre, 26 Lwr Abbey St, Dublin 1", tel: "+353 1 878 7222", link: "http://www.abbeytheatre.ie" },

    { latLng: new google.maps.LatLng(53.3450158, -6.2650386), address: "The Ark, A Cultural Centre For Children, 11a Eustace St, Temple Bar, Dublin 2", tel: "+353 1 670 7788", link: "http://www.ark.ie" },

    { latLng: new google.maps.LatLng(53.39610586, -6.26289368), address: "axis:Ballymun, Dublin 9", tel: "+353 1 883 2100", link: "http://www.axis-ballymun.ie" },

    { latLng: new google.maps.LatLng(53.28856459, -6.3716197), address: "Civic Theatre, Tallaght, Dublin 24", tel: "+353 1 462 7477", link: "http://www.civictheatre.ie" },

    { latLng: new google.maps.LatLng(53.3453276, -6.2657425), address: "The Culture Box, 12 East Essex St, Temple Bar, Dublin 2" },

    { latLng: new google.maps.LatLng(53.3525572, -6.2500383), address: "DanceHouse, 1 Foley St, Dublin 1" },

    { latLng: new google.maps.LatLng(53.3934229, -6.3858142), address: "Draíocht, The Blanchardstown Centre, Dublin 15", tel: "+353 1 885 2622", link: "http://www.draiocht.ie" },

    { latLng: new google.maps.LatLng(53.3432286, -6.2565383), address: "Edmund Burke Theatre Arts Building, Trinity College, Dublin 2" },

    { latLng: new google.maps.LatLng(53.3449723, -6.2666144), address: "Festival Box Office, 44 East Essex St, Temple Bar, Dublin 2", tel: "+353 1 677 8899", link: "http://www.dublintheatrefestival.com" }, 

    { latLng: new google.maps.LatLng(53.3401925, -6.2611233), address: "Gaiety Theatre, 53/54 South King St, Dublin 2", tel: "0818 719 300", link: "http://www.gaietytheatre.ie" }, 

    { latLng: new google.maps.LatLng(53.3392288, -6.2463933), address: "Goethe-Institut, 37 Merrion Sq, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3435732, -6.2639487), address: "Odessa, 13 Dame Court, Dublin 2" },

    { latLng: new google.maps.LatLng(53.3515299, -6.2532256), address: "Oonagh Young Gallery, 1 James Joyce St, Liberty Corner, Dublin 1" }, 

    { latLng: new google.maps.LatLng(53.3553559, -6.2621326), address: "OReilly Theatre, Belvedere 6 Great Denmark St, Dublin 1 "}, 

    { latLng: new google.maps.LatLng(53.2934538, -6.1348062), address: "Pavilion Theatre Marine Road, Dún Laoghaire, Co. Dublin", tel: "+353 1 231 2929", link: "http://www.paviliontheatre.ie" },

    { latLng: new google.maps.LatLng(53.3450204, -6.2662288), address: "Project Arts Centre, 39 East Essex St, Temple Bar, Dublin 2", tel: "+353 1 881 9613", link: "http://www.projectartscentre.ie" },

    { latLng: new google.maps.LatLng(53.34492803, -6.25734687), address: "Samuel Beckett Theatre, Trinity College, Dublin 2" },

    { latLng: new google.maps.LatLng(53.3449333, -6.2688625), address: "Smock Alley Theatre, 6/7 Exchange St Lwr, Dublin 8", tel: "+353 1 677 0014", link: "http://www.smockalley.com" },

    { latLng: new google.maps.LatLng(53.3455723, -6.2636546), address: "Temple Bar Gallery and Studios, 5 – 9 Temple Bar, Dublin 2"},


]);


    //HOOK UP STYLES
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

}

If it's easier you can view the wip here: http://www.detail.ie/ftp/DTF/map/dtf_5.html

Thanks in advance,

P

Answer 1

You can specify the image for a marker when you create it by specifying the icon property of the marker options as a path to the image you want like so:

marker = new google.maps.Marker({
    icon: "/images/icon.png"
})

See https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

In your case you should be able to add the image you want to use into your array of markers, something like:

markers = initMarkers(map, [
    { icon:"/images/icon.png", latLng: new google.maps.LatLng(53.3525572, -6.2500383), 
    ...

Then when you create your marker, simply read off its icon property like so:

marker = new google.maps.Marker({
    icon: markerData[i].icon,
    ...

Answer 2

working example (letters A-...)

function initialize() {
var styles = [
{ 
    "featureType": "poi", 
    "elementType": "geometry", 
    "stylers": [ { "visibility": "on" }, { "color": "#f5f5f5" } ] },

    { "featureType": "landscape.natural", 
    "stylers": [ { "visibility": "on" }, { "invert_lightness": true }, { "color": "#dadad9" } ] },

    { "featureType": "landscape.man_made", 
    "stylers": [ { "visibility": "off" }, { "color": "#ebebeb" } ] },

    { "featureType": "road.arterial", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] },

    { "featureType": "road.arterial", "elementType": "labels.text", 
    "stylers": [ { "saturation": -100 }, { "gamma": 3.31 }, { "weight": 0.1 } ] },

    { "featureType": "road.arterial", "elementType": "labels.stroke", 
    "stylers": [ { "visibility": "off" } ] },



    { "featureType": "road.highway", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] },

    { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "simplified" } ] },

    { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },


    { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" } ] },

    { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] },



    { "featureType": "road.local", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] },

    { "featureType": "road.local", "elementType": "labels", "stylers": [ { "visibility": "simplified" } ] },

    { "featureType": "road.local", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },

    { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" } ] },



    { "featureType": "water", 
    "stylers": [ { "color": "#646464" } ] },

    { "featureType": "poi.business",
    "stylers": [ { "visibility": "on" } ] },

    { "featureType": "transit.line", "elementType": "labels.text",
    "stylers": [ { "color": "#eeccff" }, { "visibility": "simplified" } ] }, 

    { "featureType": "transit.line", "elementType": "geometry.fill",
    "stylers": [ { "visibility": "on" }, { "color": "#ff8080" } ] },

    {
"featureType": "poi",
"stylers": [
  { "visibility": "off" }
]
},

{
"featureType": "administrative",
"stylers": [
  { "visibility": "off" }
]
},

{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
  { "visibility": "on" },
  { "color": "#e6e6e6" }
]
}
]


// STYLE
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});


var homePoint = new google.maps.LatLng(53.34729785,-6.25924587),
     markers,
        myMapOptions = {
         zoom: 15,
        center: homePoint,
        disableDefaultUI: false,
        zoomControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

// Marker style 1
var icons = new Array();
icons["red"] = {
      url:"mapIcons/marker_red.png",
      // This marker is 20 pixels wide by 34 pixels tall.
      size: new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      origin: new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      anchor: new google.maps.Point(9, 34)
      };

function getMarkerImage(iconStr) {
   if ((typeof(iconStr)=="undefined") || (iconStr==null)) { 
      iconStr = "red"; 
   }
   if (!icons[iconStr]) {
      icons[iconStr] = {
      url: "http://www.google.com/mapfiles/marker"+ iconStr +".png",
      // This marker is 20 pixels wide by 34 pixels tall.
      size: new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      origin: new google.maps.Point(0,0),
      // The anchor for this image is at 6,20.
      anchor: new google.maps.Point(9, 34)
      };
   } 
   return icons[iconStr];

}
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.

  var iconImage = {
      url: 'mapIcons/marker_red.png',
      // This marker is 20 pixels wide by 34 pixels tall.
      size: new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      origin: new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      anchor: new google.maps.Point(9, 34)
      };
  var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(9, 34));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var iconShape = {
      coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
      type: 'poly'
  };

function initMarkers(map, markerData) {
    var newMarkers = [],
        marker;

        for(var i=0; i<markerData.length; i++) {
        marker = new google.maps.Marker({
            map: map,
            icon: getMarkerImage(String.fromCharCode(i+57)),
            draggable: false,
            position: markerData[i].latLng,
            visible: true,
            labelContent: i,
            labelClass: "labels"
        }),

        boxText = document.createElement("div"),
        //INFOBOX STYLE
        infoboxOptions = {
             content: boxText,
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(0, 0),
            zIndex: null,
            boxStyle: {
                opacity: 0.75,
                width: "150px"
            },
            closeBoxMargin: "5px",
            closeBoxURL: "close.png",
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };

        // add a click listener to the marker
        google.maps.event.addListener(marker, 'click', function() {
        // reference clicked marker
        var curMarker =  this;
        // loop through all markers
        $.each(markers, function(index, marker) {
        // if marker is not the clicked marker, close the marker
        if(marker !== curMarker) {marker.infobox.close();}
        });
    });

        newMarkers.push(marker);

        //INFOBOX TEMPLATE
        boxText.style.cssText = "background:#fff; color:#000; padding: 20px;";
        boxText.innerHTML = "<a target='_blank' href='" + markerData[i].link + "'>" + markerData[i].tel + "<br/>" + markerData[i].address + "</a>";
        newMarkers[i].infobox = new InfoBox(infoboxOptions);
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                newMarkers[i].infobox.open(map, this);
                map.panTo(markerData[i].latLng);
            }
        })(marker, i));
    }

    return newMarkers;
}


    //MARKERS ARRAY
    markers = initMarkers(map, [

    { latLng: new google.maps.LatLng(53.3485401, -6.257107), address: "Abbey Theatre, 26 Lwr Abbey St, Dublin 1", tel: "+353 1 878 7222", link: "http://www.abbeytheatre.ie" },

    { latLng: new google.maps.LatLng(53.3450158, -6.2650386), address: "The Ark, A Cultural Centre For Children, 11a Eustace St, Temple Bar, Dublin 2", tel: "+353 1 670 7788", link: "http://www.ark.ie" },

    { latLng: new google.maps.LatLng(53.39610586, -6.26289368), address: "axis:Ballymun, Dublin 9", tel: "+353 1 883 2100", link: "http://www.axis-ballymun.ie" },

    { latLng: new google.maps.LatLng(53.28856459, -6.3716197), address: "Civic Theatre, Tallaght, Dublin 24", tel: "+353 1 462 7477", link: "http://www.civictheatre.ie" },

    { latLng: new google.maps.LatLng(53.3453276, -6.2657425), address: "The Culture Box, 12 East Essex St, Temple Bar, Dublin 2" },

    { latLng: new google.maps.LatLng(53.3525572, -6.2500383), address: "DanceHouse, 1 Foley St, Dublin 1" },

    { latLng: new google.maps.LatLng(53.3934229, -6.3858142), address: "Draíocht, The Blanchardstown Centre, Dublin 15", tel: "+353 1 885 2622", link: "http://www.draiocht.ie" },

    { latLng: new google.maps.LatLng(53.3432286, -6.2565383), address: "Edmund Burke Theatre Arts Building, Trinity College, Dublin 2" },

    { latLng: new google.maps.LatLng(53.3449723, -6.2666144), address: "Festival Box Office, 44 East Essex St, Temple Bar, Dublin 2", tel: "+353 1 677 8899", link: "http://www.dublintheatrefestival.com" }, 

    { latLng: new google.maps.LatLng(53.3401925, -6.2611233), address: "Gaiety Theatre, 53/54 South King St, Dublin 2", tel: "0818 719 300", link: "http://www.gaietytheatre.ie" }, 

    { latLng: new google.maps.LatLng(53.3392288, -6.2463933), address: "Goethe-Institut, 37 Merrion Sq, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3435732, -6.2639487), address: "Odessa, 13 Dame Court, Dublin 2" },

    { latLng: new google.maps.LatLng(53.3515299, -6.2532256), address: "Oonagh Young Gallery, 1 James Joyce St, Liberty Corner, Dublin 1" }, 

    { latLng: new google.maps.LatLng(53.3553559, -6.2621326), address: "OReilly Theatre, Belvedere 6 Great Denmark St, Dublin 1 "}, 

    { latLng: new google.maps.LatLng(53.2934538, -6.1348062), address: "Pavilion Theatre Marine Road, Dún Laoghaire, Co. Dublin", tel: "+353 1 231 2929", link: "http://www.paviliontheatre.ie" },

    { latLng: new google.maps.LatLng(53.3450204, -6.2662288), address: "Project Arts Centre, 39 East Essex St, Temple Bar, Dublin 2", tel: "+353 1 881 9613", link: "http://www.projectartscentre.ie" },

    { latLng: new google.maps.LatLng(53.34492803, -6.25734687), address: "Samuel Beckett Theatre, Trinity College, Dublin 2" },

    { latLng: new google.maps.LatLng(53.3449333, -6.2688625), address: "Smock Alley Theatre, 6/7 Exchange St Lwr, Dublin 8", tel: "+353 1 677 0014", link: "http://www.smockalley.com" },

    { latLng: new google.maps.LatLng(53.3455723, -6.2636546), address: "Temple Bar Gallery and Studios, 5  9 Temple Bar, Dublin 2"},


]);


    //HOOK UP STYLES
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

}
google.maps.event.addDomListener(window, 'load', initialize);