For my site(asp.net vb), I’m making an interactive Google Maps page, where markers are loaded off an XML file. When I made the code and tested it localhost it all worked fine. Now I uploaded everything to the server and all my markers are misplaced and I can’t seem to get to the problem. Maybe anyone got the same problem or knows what I’m doing wrong?
My map can be viewed here: http://beta.groundhoppen.nl/kaart
My code:
$(document).ready(function () {
// Set map height to match viewport
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
viewportHeight = viewportHeight - 60;
$("#maps").css({ 'height': viewportHeight }, 0);
$(window).resize(function () {
var viewportHeight = window.innerHeight ? window.innerHeight : $(window).height();
viewportHeight = viewportHeight - 60;
$("#maps").css({ 'height': viewportHeight }, 0);
});
$("body").css("overflow", "hidden");
// Filter tabs
$("#filter > div").hide();
$("#filter > div:first").show();
$("#filter > ul li a").click(function () {
if ($(this).parent().hasClass("active")) {
return false;
} else {
var index = $(this).parent().index() + 5;
$("#filter > ul li").removeClass("active");
$(this).parent().addClass("active");
$("#filter > div").slideUp(250);
$("#filter > div:nth-child(" + index + ")").slideDown(250);
if ($("#filter > div:nth-child(" + index + ")").attr("id") == "search") {
$("#search .input").focus();
}
return false;
}
});
// Drag info and filter
$("#filter").draggable({ containment: "#maps", scroll: false, handle: ".move" });
$("#stadium-info").draggable({ containment: "#maps", scroll: false, handle: ".move" });
// Hide info
$('#stadium-info').hide();
// Info closed
$('.close').click(function () {
var val = $(this).attr('rel');
markers[val].setMap(map);
unlock();
$('#stadium-info').fadeOut(500);
$('#filter').delay(1000).fadeIn(500);
return false;
});
$('.next, .prev').live('click', function (e) {
e.preventDefault();
var id = $(this).attr('rel');
google.maps.event.trigger(markers[id], 'click');
});
});
// Calculate best zoom for displaysize
var startZoom = null;
var viewportWidth = window.innerWidth ? window.innerWidth : $(window).width();
if (viewportWidth >= 1920) {
startZoom = 3;
} else {
startZoom = 2;
}
// Map options
var markers = [];
var emptyZoom = 17;
var startPosition = new google.maps.LatLng(10.0, 28.652344);
var mapOptions = {
zoom: startZoom,
center: startPosition,
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: false,
streetViewControl: false,
minZoom: startZoom,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
}
};
var map = new google.maps.Map(document.getElementById("google-maps"), mapOptions);
// Lock map
function lock() {
map.setOptions({
disableDoubleClickZoom: true,
draggable: false,
zoomControl: false,
panControl: false,
scrollwheel: false
});
}
// Unlock map
function unlock() {
map.setOptions({
disableDoubleClickZoom: false,
draggable: true,
zoomControl: true,
panControl: true,
scrollwheel: true
});
}
// Vars lat lng zoom for infobox
var oldLat = null;
var oldLng = null;
var oldZoom = null;
// Create markers
$.ajax({
type: "GET",
url: "xml/Maps.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('stadium').each(function () {
var lat = $(this).attr('latitude');
var lng = $(this).attr('longitude');
var zoom = $(this).attr('zoom');
var name = $(this).attr('name');
var id = $(this).attr('id');
var countryId = $(this).parent().attr('id');
if (lat > 0 || lat < 0) {
if (zoom == 0) {
zoom = emptyZoom;
}
var point = new google.maps.LatLng(lat, lng)
var marker = new google.maps.Marker({
position: point,
map: map,
icon: 'img/bg/icon-stadium.png',
title: name
});
marker.metadata = { id: id, name: name, countryId: countryId };
markers[id] = marker;
// Marker click function
google.maps.event.addListener(marker, 'click', function () {
// Save current lat lng zoom to cookie
//alert(map.getZoom());
// Zoom in on marker and hide marker
offset = new google.maps.LatLng(lat, parseFloat(lng) + parseFloat(0.0015));
map.panTo(offset);
map.setZoom(parseInt(zoom));
lock();
marker.setMap(null);
// Hide filter
$('#filter').fadeOut(500);
// Determine info position
var right;
if (viewportWidth > 1280) {
right = viewportWidth - 960;
right = right / 2 - 10;
} else {
right = 30;
}
// Get marker id
var id = marker.metadata.id;
$.ajax({
type: "GET",
url: "xml/Maps.xml",
dataType: "xml",
success: function (xml) {
var flag = $(xml).find("stadium[id=" + id + "]").parent().attr('flag');
var club = $(xml).find("stadium[id=" + id + "]").attr('club');
var capacity = $(xml).find("stadium[id=" + id + "]").attr('capacity');
var constructed = $(xml).find("stadium[id=" + id + "]").attr('constructed');
var inuse = $(xml).find("stadium[id=" + id + "]").attr('inuse');
var countryid = $(xml).find("stadium[id=" + id + "]").parent().attr('id');
var countryname = $(xml).find("stadium[id=" + id + "]").parent().attr('name');
var nextstadiumname = $(xml).find("stadium[id=" + id + "]").next().attr('name');
var nextstadiumclub = $(xml).find("stadium[id=" + id + "]").next().attr('club');
var nextstadiumid = $(xml).find("stadium[id=" + id + "]").next().attr('id');
var prevstadiumname = $(xml).find("stadium[id=" + id + "]").prev().attr('name');
var prevstadiumclub = $(xml).find("stadium[id=" + id + "]").prev().attr('club');
var prevstadiumid = $(xml).find("stadium[id=" + id + "]").prev().attr('id');
var rating = parseFloat($(xml).find("stadium[id=" + id + "]").attr('rating'));
$('#stadium-info a.close').attr("rel", id);
$('#stadium-info h6:first').html(name).prepend('<img src="uploads/flags/' + flag + '.png" alt="' + countryname + '" /> ');
$('#stadium-info').css('right', right).delay(1000).fadeIn(500);
if (nextstadiumname == undefined) {
nextstadiumname = $(xml).find("country[id=" + countryid + "]").children().first().attr('name');
nextstadiumclub = $(xml).find("country[id=" + countryid + "]").children().first().attr('club');
nextstadiumid = $(xml).find("country[id=" + countryid + "]").children().first().attr('id');
}
$('.next').html(nextstadiumname);
$('.next').attr('title', nextstadiumname + ', ' + nextstadiumclub);
$('.next').attr('rel', nextstadiumid);
if (prevstadiumname == undefined) {
prevstadiumname = $(xml).find("country[id=" + countryid + "]").children().last().attr('name');
prevstadiumclub = $(xml).find("country[id=" + countryid + "]").children().last().attr('club');
prevstadiumid = $(xml).find("country[id=" + countryid + "]").children().last().attr('id');
}
$('.prev').html(prevstadiumname);
$('.prev').attr('title', prevstadiumname + ', ' + prevstadiumclub);
$('.prev').attr('rel', prevstadiumid);
$('#info-capacity').html(capacity);
$('#info-club').html(club.replace(/_/g, "<br />"));
$('#info-constructed').html(constructed);
$('#info-inuse').html(inuse);
var oRating = $find("ctl00_ContentPlaceHolder2_GoogleMaps1_rating");
oRating.set_value(rating);
}
});
});
}
});
}
});
//Filters
// Reset filters and show all markers
function ResetFilters() {
$("#search .input").val("Zoek op trefwoord");
ResetMarkers();
}
// Reset all markers to map
function ResetMarkers() {
for (i in markers) {
markers[i].setMap(map);
}
}
// Filter by country
$("#filter_country").live("change", function () {
var val = $(this).val();
$.ajax({
type: "GET",
url: "xml/Maps.xml",
dataType: "xml",
success: function (xml) {
var lat = $(xml).find("country[id=" + val + "]").attr("latitude");
var lng = $(xml).find("country[id=" + val + "]").attr("longitude");
var zoom = $(xml).find("country[id=" + val + "]").attr("zoom");
if (lat > "0" && lng > "0") {
var countryPosition = new google.maps.LatLng(lat, lng);
map.panTo(countryPosition);
map.setZoom(parseInt(zoom));
}
}
});
if (val > 0) {
for (i in markers) {
if (markers[i].metadata.countryId == val) {
markers[i].setMap(map);
} else {
markers[i].setMap(null);
}
}
} else {
ResetMarkers();
}
});
// Filter by stadium
$("#filter_stadium").live("change", function () {
var val = $(this).val();
//var marker = new google.maps.Marker(markers[val]);
google.maps.event.trigger(markers[val], 'click');
});
// Filter by keywords
$("#search .input").keyup(function () {
var val = $(this).val().toLowerCase();
if (val != "suche nach schlüsselwort" && val != "search by keyword" && val != "zoek op trefwoord") {
for (i in markers) {
if (markers[i].metadata.name.toLowerCase().indexOf(val) >= 0) {
markers[i].setMap(map);
} else {
markers[i].setMap(null);
}
}
} else {
ResetMarkers();
}
});
$('#search .input').focus(function () {
map.setCenter(startPosition);
map.setZoom(startZoom);
});
$("#filter ul li a").click(function () {
ResetFilters();
return false;
});
It’s your data at http://beta.groundhoppen.nl/xml/Maps.xml — there are a number of locations at (0,0) and all of them are within only a few degrees of that point.