I've recently change xml files that I am using to create a "locations" map for our website, but since switching to the new xml document none of the markers are showing up. Directly navigating to the xml generator displays correctly formatted xml and console output shows markers are being correctly created with the data from the xml, but nothing shows on the map. The only thing that has changed is the xml file!
Here's my code: (basically stock from Google's website)
<?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://ift.tt/1l8n5wH" rel="stylesheet" type="text/css" />
<link href="http://ift.tt/1rBxClf" rel="stylesheet" type="text/css" />
<!-- Add jQuery -->
<script src="http://ift.tt/tDgIVI"></script>
<!-- Tracking Code -->
<!-- Maps -->
<script type="text/javascript" src="http://ift.tt/1rBxAK7">
</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://ift.tt/1uzd3tp';
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://ift.tt/1rBxAK9" + 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://ift.tt/Jyp4s8
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://ift.tt/1rBxAKb" target="_blank"><img src="<?php bloginfo( 'stylesheet_directory' ); echo('/images/facebook.png'); ?>" alt="Facebook" width="16" height="16" /></a>
<!--<a href="http://ift.tt/1uzd3tt" 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>
No comments:
Post a Comment