i'm working on creating list of venues upcoming festival , each labelled individual marker image. while i've got other aspects of map working can't seem assign individual marker image in array of venues.
this 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 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 click listener marker google.maps.event.addlistener(marker, 'click', function() { // reference clicked marker var curmarker = this; // loop through markers $.each(markers, function(index, marker) { // if marker not clicked marker, close 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, cultural centre 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, 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 , studios, 5 – 9 temple bar, dublin 2"}, ]); //hook styles map.maptypes.set('map_style', styledmap); map.setmaptypeid('map_style'); } if it's easier can view wip here: http://www.detail.ie/ftp/dtf/map/dtf_5.html
thanks in advance,
p
you can specify image marker when create specifying icon property of marker options path image want so:
marker = new google.maps.marker({ icon: "/images/icon.png" }) see https://developers.google.com/maps/documentation/javascript/reference#markeroptions
in case should able add image want use array of markers, like:
markers = initmarkers(map, [ { icon:"/images/icon.png", latlng: new google.maps.latlng(53.3525572, -6.2500383), ... then when create marker, read off icon property so:
marker = new google.maps.marker({ icon: markerdata[i].icon, ... 
Comments
Post a Comment