如何创建自定义谷歌地图(api v3)标记信息窗口(在特定示例的上下文中)

1) 所以有 this great example 通过点击复选框来显示标记组,我想通过自定义标记信息窗口来扩展这一点。下面是这个例子中的代码——它非常适合切换标记,但有未格式化的信息窗口。我已经对它做了一些额外的自定义。也就是说,对地图进行了风格化,并增加了响应性,以便在浏览器窗口更改时标记保持居中:

//<![CDATA[
  // this variable will collect the html which will eventually be placed in the side_bar 
  var side_bar_html = ""; 

  var gmarkers = [];
  var gicons = [];
  var map = null;

 var infowindow = new google.maps.InfoWindow(
 { 
   size: new google.maps.Size(150,50)
  });

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('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 &lt;area&gt; 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];

 }

function category2color(category) {
   var color = "red";
   switch(category) {
     case "theatre": color = "blue";
            break;
     case "golf":    color = "green";
            break;
     case "info":    color = "yellow";
                break;
 default:   color = "red";
            break;
   }
   return color;
}

  gicons["theatre"] = getMarkerImage(category2color("theatre"));
  gicons["golf"] = getMarkerImage(category2color("golf"));
  gicons["info"] = getMarkerImage(category2color("info"));

  // A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
var contentString = html;
var marker = new google.maps.Marker({
    position: latlng,
    icon: gicons[category],
    shadow: iconShadow,
    map: map,
    title: name,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });
    // === Store the category and name info as a marker properties ===
    marker.mycategory = category;                                 
    marker.myname = name;
    gmarkers.push(marker);

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

  // == shows all markers of a particular category, and ensures the checkbox is checked ==
  function show(category) {
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setVisible(true);
      }
    }
    // == check the checkbox ==
    document.getElementById(category+"box").checked = true;
  }

  // == hides all markers of a particular category, and ensures the checkbox is cleared ==
  function hide(category) {
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].mycategory == category) {
        gmarkers[i].setVisible(false);
      }
    }
    // == clear the checkbox ==
    document.getElementById(category+"box").checked = false;
    // == close the info window, in case its open on a marker that we just hid
    infowindow.close();
  }

  // == a checkbox has been clicked ==
  function boxclick(box,category) {
    if (box.checked) {
      show(category);
    } else {
      hide(category);
    }
    // == rebuild the side bar
    makeSidebar();
  }

  function myclick(i) {
    google.maps.event.trigger(gmarkers[i],"click");
  }


  // == rebuilds the sidebar to match the markers currently displayed ==
  function makeSidebar() {
    var html = "";
    for (var i=0; i<gmarkers.length; i++) {
      if (gmarkers[i].getVisible()) {
        html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
      }
    }
    document.getElementById("side_bar").innerHTML = html;
  }

function initialize() {

var styles = [
{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
  { "color": "#d5d0c8" }
]
},{
"featureType": "water",
"stylers": [
  { "invert_lightness": true },
  { "visibility": "simplified" }
]
},{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
  { "color": "#c4bfb5" },
  { "visibility": "on" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
  { "color": "#ffffff" },
  { "visibility": "simplified" }
]
},{
"featureType": "road.local",
"elementType": "labels.text.stroke",
"stylers": [
  { "color": "#c4bfb5" }
]
},{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
  { "color": "#ffffff" }
]
},{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
  { "color": "#ffffff" },
  { "visibility": "on" }
]
},{
"featureType": "road.highway",
"elementType": "labels.text.stroke",
"stylers": [
  { "color": "#ffffff" }
]
},{
"featureType": "road.arterial",
"elementType": "labels.text.stroke",
"stylers": [
  { "color": "#ffffff" }
]
},{
"featureType": "landscape.natural.terrain",
"elementType": "geometry",
"stylers": [
  { "color": "#c9c4b4" }
]
},{
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
  { "color": "#808080" },
  { "visibility": "off" }
]
},{
"featureType": "landscape.man_made",
"stylers": [
  { "visibility": "off" }
]
}
];

// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
 {name: "Styled Map"});


var myOptions = {
  zoom: 11,
  center: new google.maps.LatLng(53.8363,-3.0377),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);


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


// Ensure the map stays centered when we resize the browser
google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});    

//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

  // Read the data
  downloadUrl("categories.xml", function(doc) {
var xml = xmlParse(doc);
var markers = xml.documentElement.getElementsByTagName("marker");

    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var address = markers[i].getAttribute("address");
      var name = markers[i].getAttribute("name");
      var html = "<b>"+name+"<\/b><p>"+address;
      var category = markers[i].getAttribute("category");
      // create the marker
      var marker = createMarker(point,name,html,category);
    }

    // == show or hide the categories initially ==
    show("theatre");
    hide("golf");
    hide("info");
    // == create the initial sidebar ==
    makeSidebar();
  });
}

// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/   
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/example_categories.htm
//]]>

下面是categories.xml的内容:

<markers>
      <marker name="Grand Theatre" address="33 Church St, Blackpool, Lancashire, FY1 1HT" lng="-3.053102" lat="53.817260" category="theatre" />
      <marker name="Claremont Theatre Club" address="Burwood Dr, Blackpool, Lancashire, FY3 8NS" lng="-3.049690" lat="53.829649" category="theatre" />
       ETC...
</markers>

2) 我发现了以下非常好的、有风格的信息窗口的工作示例 over here 。我只是不知道如何将该代码与上面的js代码一起使用。以下是这个特定示例产生的javascript。如果有更好的方法可以做到这一点,并且它可以与上面#1的代码一起使用,我对此持完全开放的态度。与此示例使用的ExpressionEngine CMS方法没有关联。

var options = {
        alignBottom: true,
        boxClass: "ui-infobox-dark",
        boxStyle: {width:'250px'},
                closeBoxMargin: "",
                closeBoxURL: "white-close-button.png",
                disableAutoPan: false,
                enableEventPropagation: false,
                infoBoxClearance: new google.maps.Size(0, 0),
                isHidden: false,
                maxWidth: 0,
                pane: "floatPane",
                pixelOffset: new google.maps.Size(0, 0),
                zIndex: null
            };

            var infowindow  = new InfoBox(options);

            var obj = map7_markers[index];      


            map7_windows.push(infowindow);

            google.maps.event.addListener(obj, 'click', function(e) {
                obj.position = e.latLng;                            
                obj.getPosition = function() {
                    return e.latLng;
                }                   
                    for(var i = 0; i < map7_windows.length; i++) {
                        map7_windows[i].close();
                    }
                infowindow.setPosition(e.latLng);
                infowindow.open(map7_map, obj);

            });

            map7_window = infowindow;