为什么我的信息窗口没有显示？

Question

I'm making a map which uses custom tiles I pulled from World of Warcraft, I have gotten markers to show up and i'm pretty sure I'm doing infowindows correctly but they are not showing up when I click on the marker?

Relevant JsFiddle

Script:

$(function () {
    initialize();
    $(window).resize(function () {
        $('#map').css('width', $(window).width() + 'px');
        $('#map').css('height', ($(window).height() - 35) + 'px');
        google.maps.event.trigger(map, 'resize');
        hash_init(); // keeps the map centered correctly
    }).resize();
});

function CustomMapType() {}
CustomMapType.prototype.tileSize = new google.maps.Size(256, 256);
CustomMapType.prototype.maxZoom = 7;
CustomMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('DIV');
    var baseURL = 'http://d1m6g5gl70bc4l.cloudfront.net/';
    baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.backgroundColor = '#1B2D33';
    div.style.backgroundImage = 'url(' + baseURL + ')';
    return div;
};

CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var CustomMapType = new CustomMapType();

function initialize() {
    var mapOptions = {
        minZoom: 2,
        maxZoom: 7,
        isPng: true,
        mapTypeControl: false,
        streetViewControl: false,
        center: new google.maps.LatLng(56.705, -35.200),
        zoom: 3,
        mapTypeControlOptions: {
            mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }

    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    map.mapTypes.set('custom', CustomMapType);
    map.setMapTypeId('custom');

    geocoder = new google.maps.Geocoder();
    infoWindow = new google.maps.InfoWindow();

    xmlUrl = "markers.xml";

    loadMarkers();

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

//
// Google Maps functions 
//

// Google Maps vars
var myLatlng; // Add the coordinates
var mapOptions = {};
var geocoder;
var map;
var defaultZoom = 10;
var image;
var xmlUrl;
var infoWindow;
var markers;
var contactUrl;



function downloadUrl(url, callback) {
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();

    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            //request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };

    request.open('GET', url, true);
    request.send(null);
}

function loadMarkers() {
    map.markers = map.markers || [];
    // downloadUrl(xmlUrl, function (data) {
    // var xml = data.responseXML;
    var xmlString ='<?xml version="1.0" encoding="UTF-8"?><markers><marker id="1" name="Goldshire" address1="Azeroth" address2="info" address3="info" city="info" postcode="info" lat="35.120" lng="33.706" /></markers>';

        var xml = xmlParse(xmlString);
        markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var marker_image = markers[i].getAttribute('markerimage');
            var id = markers[i].getAttribute("id");
            var address = markers[i].getAttribute("address1")+"<br />"+markers[i].getAttribute("address2")+"<br />"+markers[i].getAttribute("address3")+"<br />"+markers[i].getAttribute("postcode");
            var image = {
              url: marker_image,
              size: new google.maps.Size(71, 132),
              origin: new google.maps.Point(0, 0),
              scaledSize: new google.maps.Size(71, 132)
            };
            var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
            var html = "<div class='infowindow'><b>" + name + "</b> <br/>" + address + '<br/></div>';
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: image,
                title: name
            });
            map.markers.push(marker);
            bindInfoWindow(marker, map, infoWindow, html);
        }
//    });
}

function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
}
/**
 * Parses the given XML string and returns the parsed document in a
 * DOM data structure. This function will return an empty DOM node if
 * XML parsing is not supported in this browser.
 * @param {string} str XML string.
 * @return {Element|Document} DOM.
 */
function xmlParse(str) {
    if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
    }

    if (typeof DOMParser != 'undefined') {
        return (new DOMParser()).parseFromString(str, 'text/xml');
    }

    return createElement('div', null);
}

Sorry if its an easily fixed problem, its my first time with google maps.

Answer 1

use this:

     var marker_image = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png';

instead of

 var marker_image = markers[i].getAttribute('markerimage');

or add markerimage in the xml.

since your code gives error for url because the image string is not available that's why you are not getting infowindow.

// see demo here

 $(function () { initialize(); $(window).resize(function () { $('#map').css('width', $(window).width() + 'px'); $('#map').css('height', ($(window).height() - 35) + 'px'); google.maps.event.trigger(map, 'resize'); hash_init(); // keeps the map centered correctly }).resize(); }); function CustomMapType() {} CustomMapType.prototype.tileSize = new google.maps.Size(256, 256); CustomMapType.prototype.maxZoom = 7; CustomMapType.prototype.getTile = function (coord, zoom, ownerDocument) { var div = ownerDocument.createElement('DIV'); var baseURL = 'http://d1m6g5gl70bc4l.cloudfront.net/'; baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png'; div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.backgroundColor = '#1B2D33'; div.style.backgroundImage = 'url(' + baseURL + ')'; return div; }; CustomMapType.prototype.name = "Custom"; CustomMapType.prototype.alt = "Tile Coordinate Map Type"; var map; var CustomMapType = new CustomMapType(); function initialize() { var mapOptions = { minZoom: 2, maxZoom: 7, isPng: true, mapTypeControl: false, streetViewControl: false, center: new google.maps.LatLng(56.705, -35.200), zoom: 3, mapTypeControlOptions: { mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP], style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); map.mapTypes.set('custom', CustomMapType); map.setMapTypeId('custom'); geocoder = new google.maps.Geocoder(); infoWindow = new google.maps.InfoWindow(); xmlUrl = "markers.xml"; loadMarkers(); } google.maps.event.addDomListener(window, 'load', initialize); // // Google Maps functions // // Google Maps vars var myLatlng; // Add the coordinates var mapOptions = {}; var geocoder; var map; var defaultZoom = 10; var image; var xmlUrl; var infoWindow; var markers; var contactUrl; function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest(); request.onreadystatechange = function () { if (request.readyState == 4) { //request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function loadMarkers() { map.markers = map.markers || []; // downloadUrl(xmlUrl, function (data) { // var xml = data.responseXML; var xmlString ='<?xml version="1.0" encoding="UTF-8"?><markers><marker id="1" name="Goldshire" address1="Azeroth" address2="info" address3="info" city="info" postcode="info" lat="35.120" lng="33.706" /></markers>'; var xml = xmlParse(xmlString); markers = xml.documentElement.getElementsByTagName("marker"); console.log(markers); for (var i = 0; i < markers.length; i++) { var name = markers[i].getAttribute("name"); var marker_image = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'; var id = markers[i].getAttribute("id"); var address = markers[i].getAttribute("address1")+"<br />"+markers[i].getAttribute("address2")+"<br />"+markers[i].getAttribute("address3")+"<br />"+markers[i].getAttribute("postcode"); var image = { url: marker_image, size: new google.maps.Size(71, 132), origin: new google.maps.Point(0, 0), scaledSize: new google.maps.Size(71, 132) }; var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "<div class='infowindow'><b>" + name + "</b> <br/>" + address + '<br/></div>'; var marker = new google.maps.Marker({ map: map, position: point, icon: image, title: name }); map.markers.push(marker); bindInfoWindow(marker, map, infoWindow, html); } // }); } function bindInfoWindow(marker, map, infoWindow, html) { google.maps.event.addListener(marker, 'click', function () { infoWindow.setContent(html); infoWindow.open(map, marker); }); } /** * Parses the given XML string and returns the parsed document in a * DOM data structure. This function will return an empty DOM node if * XML parsing is not supported in this browser. * @param {string} str XML string. * @return {Element|Document} DOM. */ function xmlParse(str) { if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } if (typeof DOMParser != 'undefined') { return (new DOMParser()).parseFromString(str, 'text/xml'); } return createElement('div', null); } 

 html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100%; z-index: 0; } #gmnoprint { width: auto; } 

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script> <div class="topnav"> <ul id="nav" xclass="topnav"> <li><a href="/" class="current">Azeroth</a> </li> <li><a href="/outland/">Outland</a> </li> <li><a href="/deepholm/">Deepholm</a> </li> <li><a href="/outland/">Draenor</a> </li> </ul> </div> <div id="map_canvas" style="background: #1B2D33;"></div>