0
Недавно я изменил файлы XML, которые я использую, чтобы создать карту местоположений для нашего сайта, но поскольку при переходе на новый XML-документ ни один из маркеров не появляется. Непосредственная навигация к генератору XML отображает правильно отформатированный XML и вывод на консоль показывает, что маркеры правильно создаются с данными из XML, но на карте ничего не отображается. Единственное, что изменилось, это XML-файл!API-интерфейс Google Maps, не отображающий маркеры
Вот мой код: (в основном акции с веб-сайта компании Google)
<?php /* Template Name: Campus Locator */ ?>
<!DOCTYPE html>
<html>
<head>
<!-- Page Title -->
<title>
<?php bloginfo('name'); wp_title('-'); ?>
</title>
<!-- Main Style -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<style>
#map {
width: 100%;
height: 500px;
margin-bottom: 20px;
}
#stateselect {
width: 10em;
margin-bottom: 1em;
}
.gm-style-iw {
overflow: visible !important;
min-width: 200px;
height: auto !important;
width: auto !important;
}
</style>
<!-- Mobile Browser Support -->
<meta name="viewport" content="width=device-width; initial-scale=1;" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); echo(" /responsive.css "); ?>" type="text/css" media="screen" />
<!-- Additional Styles -->
<!-- IE Conditional Styles -->
<!-- Feed Reader Support -->
<link rel="alternate" type="application/rss+xml" title="Bridges International RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Bridges International Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<!-- Google Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Kreon:light,regular" rel="stylesheet" type="text/css" />
<!-- Add jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!-- Tracking Code -->
<!-- Maps -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=*********************************************&sensor=false">
</script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = [];
var infoWindow;
var geocoder = null;
function load() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
});
infoWindow = new google.maps.InfoWindow();
displayMarkers();
} //end load function
function findAddress(address) {
var addressStr = document.getElementById("stateselect").value;
if (!address && (addressStr != ''))
address = "State of " + addressStr;
else
address = addressStr;
if ((address != '') && geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
if (results && results[0] && results[0].geometry && results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
} //end findAddress function
function displayMarkers() {
//pass the data to generate xml
var searchUrl = 'http://www.bridgesinternational.com/xml/genxmlibib.php';
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
//loop through xml and create markers
for (var i = 0; i < markerNodes.length; i++) {
//declare and populate variables with xml data
//var locationID = markerNodes[i].getAttribute("locationID");
var name = markerNodes[i].getAttribute("name");
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
var contact = markerNodes[i].getAttribute("contact");
var website = markerNodes[i].getAttribute("website");
var facebookPage = markerNodes[i].getAttribute("facebookPage");
//create marker
//createMarker(locationID, latlng, name, contact, website, facebookPage);
createMarker(latlng, name, contact, website, facebookPage);
} //end for loop
}); //end downloadUrl function
} // end displayMarkers function
//function createMarker(locationID, latlng, name, contact, website, facebookPage) {
function createMarker(latlng, name, contact, website, facebookPage) {
//format the html to dispay inside the infowindow
var html = "<b>" + name + "</b>";
if (contact != "") {
//html += "<br /><a href=\"http://www.bridgesinternational.com/campus-locator-email-form/?locationID=" + locationID + "\">Email Us!</a>";
html += "<br /><a href=\"mailto:" + contact + "\">Email Us!</a>";
}
if (website != "") {
html += "<br /><a href=\"http://" + website + "\">Visit our website</a>";
}
if (facebookPage != "") {
html += "<br /><a href=\"http://" + facebookPage + "\">Connect with us on Facebook</a>";
}
//console.log(html);
//create the marker
/***********************************************************/
// Google Map Custom Marker Maker 2012
// Please include the following credit in your code
// Sample custom marker code created with Google Map Custom Marker Maker
// http://powerhut.co.uk/googlemaps/custom_markers.php
var image = new google.maps.MarkerImage(
'<?php bloginfo('
stylesheet_directory '); ?>/images/marker-images/image1.png',
new google.maps.Size(40, 45),
new google.maps.Point(0, 0),
new google.maps.Point(20, 45)
);
var shadow = new google.maps.MarkerImage(
'<?php bloginfo('
stylesheet_directory '); ?>/images/marker-images/shadow1.png',
new google.maps.Size(66, 45),
new google.maps.Point(0, 0),
new google.maps.Point(20, 45)
);
var shape = {
coord: [36, 0, 39, 1, 39, 2, 39, 3, 39, 4, 39, 5, 39, 6, 39, 7, 39, 8, 39, 9, 39, 10, 39, 11, 39, 12, 39, 13, 39, 14, 39, 15, 39, 16, 39, 17, 39, 18, 39, 19, 39, 20, 39, 21, 39, 22, 39, 23, 39, 24, 39, 25, 39, 26, 39, 27, 39, 28, 39, 29, 39, 30, 39, 31, 39, 32, 39, 33, 39, 34, 39, 35, 39, 36, 39, 37, 39, 38, 36, 39, 24, 40, 23, 41, 22, 42, 21, 43, 20, 44, 19, 44, 18, 43, 17, 42, 16, 41, 15, 40, 3, 39, 2, 38, 1, 37, 0, 36, 0, 35, 0, 34, 0, 33, 0, 32, 0, 31, 0, 30, 0, 29, 0, 28, 0, 27, 0, 26, 0, 25, 0, 24, 0, 23, 0, 22, 0, 21, 0, 20, 0, 19, 0, 18, 0, 17, 0, 16, 0, 15, 0, 14, 0, 13, 0, 12, 0, 11, 0, 10, 0, 9, 0, 8, 0, 7, 0, 6, 0, 5, 0, 4, 0, 3, 1, 2, 2, 1, 3, 0, 36, 0],
type: 'poly'
};
var marker = new google.maps.Marker({
icon: image,
shadow: shadow,
shape: shape,
map: map,
position: latlng
});
//open the info window when the marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
//console.log(marker);
//add marker to marker array
markers.push(marker);
//console.log(markers);
} //end createMarker function
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.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
} // end downloadUrl function
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
} // end parseXml function
function doNothing() {}
//]]>
</script>
<!-- End Maps Script-->
</head>
<body onload="load()">
<div id="page-container">
<div id="header">
<!-- begin logo -->
<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); echo('/images/bridges_logo_v1.png'); ?>" alt="Bridges International" id="logo"/></a>
<!-- end logo -->
<!-- begin social media and search -->
<div id="additional-info">
<div id="social-media-icons"><a href="http://www.facebook.com/bridgesinternational" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); echo('/images/facebook.png'); ?>" alt="Facebook" width="16" height="16" /></a>
<!--<a href="http://twitter.com/nationsherenow" target="_blank"><img src="<?php //bloginfo('stylesheet_directory'); echo('/images/twitter.png'); ?>" alt="Twitter" width="16" height="16" /></a>-->
</div>
<!-- search bar -->
<?php get_search_form($echo); ?>
</div>
<!-- end social media and search -->
<!-- begin nav-->
<?php wp_nav_menu(array('sort_column'=>'menu_order', 'theme_location' => 'header', 'menu' => 'Header Navigation', 'container' => false, 'menu_class' => 'nav', 'menu_id' => 'header-menu')); ?>
<!-- end nav-->
<!-- header image -->
<img id="header-img" src="<?php bloginfo('stylesheet_directory'); echo('/images/three-girls.jpg'); ?>" alt="Three Girls" />
</div>
<!-- end header -->
<!-- begin custom content -->
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
<?php endif; ?>
<div id="map-message" style="color: #00F; font-weight: bold;"></div>
<div>
<select name="stateselect" id="stateselect" onclick="findAddress();return false" onchange="findAddress();return false" onfocus="">
<option value=''>Select a State....</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</div>
<div id="map"></div>
</div>
<!-- end #content-area -->
<div id="footer" class="clearfix">
<div id="footer-content">
<h3>Contact Us</h3>
<p>12012 Technology Blvd #103
<br />Austin, TX 78727
<br />512-250-5046
</p>
<p id="copyright">©
<?php echo(date("Y")); ?>Bridges International</p>
</div>
<!-- end #footer-content -->
</div>
<!-- end #footer -->
</div>
<!-- end #page-container -->
<?php /* Always have wp_footer() just before the closing </body>* tag of your theme, or you will break many plugins, which * generally use this hook to reference JavaScript files. */ wp_footer(); ?>
</body>
</html>
XML-изменен с
<markers>
<marker locationID="8050" name="North Carolina State University" address="2200 Hillsborough Raleigh, NC 27695" lat="35.784958" lng="-78.682732" contact="10243" website="" facebookPage=""/>
.....
</markers>
к:
<markers>
<marker name="North Carolina State University" website="missing" facebookPage="missing" lng="35.78579" lat="-78.663589" contact="[email protected]"/>
.....
</markers>
Как выглядит ваш XML сейчас? Как это изменилось? – geocodezip
См. Текст выше для изменений XML. Я изменил xml, чтобы включить только ту информацию, которую я использую для карты infoWindows. – user1883901