0
この変数は最終的にside_barに配置されるhtmlを集めます どのように変更できますかあなたの助けのために数字のthxのアイコンにマップapi v3のアイコンマーカーの機能 var side_bar_html = "";この関数を数字のアイコンに変更するにはmarker_blue1.png marker_blue2.png ...ホバーでmarker_yellow1.png marker_yellow2.png
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var gicons = [];
// global "map" variable
var map = null;
gicons["red"] = new google.maps.MarkerImage("./mapIcons/marker_red.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
// 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 = new google.maps.MarkerImage('./mapIcons/marker_red.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('./mapIcons/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(0, 10));
// 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 getMarkerImage(iconColor) {
if ((typeof(iconColor)=="undefined") || (iconColor==null)) {
iconColor = "red";
}
if (!gicons[iconColor]) {
gicons[iconColor] = new google.maps.MarkerImage("./mapIcons/marker_"+ iconColor +".png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 6,20.
new google.maps.Point(9, 34));
}
return gicons[iconColor];
}
gicons["blue"] = getMarkerImage("blue");
gicons["green"] = getMarkerImage("green");
gicons["yelow"] = getMarkerImage("yellow");
// A function to create the marker and set up the event window function
function createMarker(latlng,name,html,color) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: gicons[color],
shadow: iconShadow,
map: map,
title: name,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
// Switch icon on marker mouseover and mouseout
google.maps.event.addListener(marker, "mouseover", function() {
marker.setIcon(gicons["yellow"]);
});
google.maps.event.addListener(marker, "mouseout", function() {
marker.setIcon(gicons["blue"]);
});
gmarkers.push(marker);
// add a line to the side_bar html
var marker_num = gmarkers.length-1;
side_bar_html += '<a href="javascript:myclick(' + marker_num + ')" onmouseover="javascript:myclick(' + marker_num + ')" onmouseover="gmarkers['+marker_num+'].setIcon(gicons.yellow)" onmouseout="gmarkers['+marker_num+'].setIcon(gicons.blue)">' + name + '<\/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "mouseover");
}