asked on

Google Maps Api how to set zoom on marker

Hi all,

I am using the google map api with my site.

So far i have markers on my map and the markers are in a table in a MySQL DB. The XML used to pull in the marker is dynamic using PHP.

I am using the sidebar and i have categories for the markers and then each marker is listed as a link under a heading for its coinsiding category.

My categories are counties of the UK and each county holds the markers(shops).

When the page is hit the zoom level and map co-ordinates are set byt the following line:
map.setCenter(new GLatLng(52.2195,-5),5, G_SATELLITE_MAP);

as you will see in the code attached.

What i want to achieve is have the categories in the sidebar as links(currently just text), i want the link to be a new set of lat and long coordinates and zoom level.

For example on the text below Cambridgeshire and suffolk would link to those counties and then the user would be concentrating their map view on that county and its shops.

Cambridgeshire
Shop1
Shop2
Shop3

Suffolk
Shop1
Shop2
Shop3

I am not sure how to go about making the categories links and for those links to go to a new zoom level and location on the map.

I hope this makes sense.

Thanks

<script type="text/javascript">
//<![CDATA[
 
 var map, actual;
 var gmarkers = [];
 
 
 var ltblue = new GIcon();
 ltblue.image= "http://local.google.com/mapfiles/ms/icons/ltblue-dot.png";
 addIcon(ltblue);
 
 var pink = new GIcon();
 pink.image= "http://www.google.com/intl/en_de/mapfiles/ms/icons/pink-dot.png";
 addIcon(pink);
 
 var blue = new GIcon();
 blue.image= "http://local.google.com/mapfiles/ms/icons/blue-dot.png";
 addIcon(blue);
 
 var brown = new GIcon();
 brown.image= "images/brown-dot.png";
 addIcon(brown);
 
 var icons = { "SouthYorkshire": pink, "Cambridgeshire": brown, "Devon": ltblue, "Lincolnshire": blue };
 
function addIcon(icon) { // Add icon attributes for all icons
 
 icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
 icon.iconSize = new GSize(32, 32);
 icon.shadowSize = new GSize(37, 34);
 icon.iconAnchor = new GPoint(9, 34);
 icon.infoWindowAnchor = new GPoint(19, 2);
 icon.infoShadowAnchor = new GPoint(18, 25);
}
 
 // Create the markers and set up the event window
 function createMarker(point, name, html, category, id) {
  var marker = new GMarker(point, icons[category] );
   // Store category, name, id and icon as marker properties
   marker.category = category;
   marker.name = name;
   marker.id = id;
   marker.icon = icons[category];
   GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
   });
  // Hovering over the markers
  GEvent.addListener(marker, "mouseover", function() {
   marker.setImage("images/white-dot.png");
   var hovered = document.getElementById(id);
   if(hovered) {
    hovered.className = "focus";
    actual = hovered; // Store this element
   }
  });
 
  GEvent.addListener(marker, "mouseout", function() {
    marker.setImage(icons[category].image);
     if(actual) { actual.className= "normal"; }
  });
 
  gmarkers.push(marker);
  return marker;
 }
 
 
var hover = { // Hovering over the links
 over: function(id) {
  // Set another background color for the link
  var hovered = document.getElementById(id);
  hovered.className = "focus";
 
  // Set another marker icon
  for(var i =0; i < gmarkers.length; i++) {
   if(gmarkers[i].id == id) {
    gmarkers[i].setImage("images/white-dot.png");
   }
  }
 },
 
 out: function(id) {
  // Set the default link background
  var hovered = document.getElementById(id);
  hovered.className = "normal";
 
  // Set the default marker icon
  for(var i =0; i < gmarkers.length; i++) {
   if(gmarkers[i].id == id) {
    gmarkers[i].setImage(gmarkers[i].icon.image);
   }
  }
 }
}
 
var visible= { // Make a category (un)visible
 show: function(category) {
  // Show all markers of one category
  for(var i= 0; i < gmarkers.length; i++) {
   if(gmarkers[i].category == category) {
    gmarkers[i].show();
   }
  }
   // Set the checkbox to true
   document.getElementById(category).checked = true;
 },
 
 hide: function(category) {
  // Hide all markers of one category
  for(var i= 0; i < gmarkers.length; i++) {
   if(gmarkers[i].category == category) {
    gmarkers[i].hide();
   }
  }
  // Clear the checkbox of a hidden category
  document.getElementById(category).checked = false;
  map.closeInfoWindow();
 }
}
 
 function boxclick(box, category) {
 
  // Hide or show the category of the clicked checkbox
  if(box.checked) { visible.show(category); }
  else { visible.hide(category); }
 
  // Rebuild the sidebar
  makeSidebar();
 }
 
 // Trigger the clicks from the sidebar to open the appropriate infowindow
 function Info(i) {
  GEvent.trigger(gmarkers[i],"click");
 }
 
 
 // Rebuild the sidebar to match currently displayed markers
 function makeSidebar() {
 
  var oldheader;
 
  var html = "";
  for(var i= 0; i < gmarkers.length; i++) {
   if(!gmarkers[i].isHidden()) {
 
   var header = gmarkers[i].category;
   header = header.replace(/^./, header.charAt(0).toUpperCase());
    if (oldheader != header) html += "<br \/><li><b>"+ header+"</b></li>";
    html += '<a id="'+ gmarkers[i].id+'" href="javascript:Info('+i+')" onmouseover="hover.over(this.id)" onmouseout="hover.out(this.id)">' + gmarkers[i].name + '<\/a><br \/>';
    oldheader = header;
   }
  }
  document.getElementById("sidebar").innerHTML = html;
 }
 
 // Create the map
 function load() {
  if(GBrowserIsCompatible()) {
   map = new GMap2(document.getElementById("map"));
   map.addMapType(G_PHYSICAL_MAP);
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   //map.enableContinuousZoom();
   map.enableScrollWheelZoom();
   map.setCenter(new GLatLng(52.2195,-5),5, G_SATELLITE_MAP);
   readData(); 
  }
 }
 
 
function readData() {
 
 var request = GXmlHttp.create();
 request.open("GET", "GoogleMarkers.php", true);
 request.onreadystatechange = function() {
  if(request.readyState == 4) {
  // Use the browsers XML parser
  // var xml = request.responseXML;
 
  // Use Googles XML parser
  var xml = GXml.parse(request.responseText);
 
   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 GLatLng(lat,lng,13);
    var address = markers[i].getAttribute("address");
    var id = markers[i].getAttribute("nr");
    var name = markers[i].getAttribute("name");
    var html = "<b>"+name+"<\/b><p style='font-size:smaller'>" + address + "<\/p>";
    var category = markers[i].getAttribute("category");
    // Create the markers
    map.addOverlay(createMarker(point, name, html, category, id));
   }
 
 if(gmarkers) {
 
   // Sort categories and names to display
   // both in alphabetic order
   gmarkers.sort(compareCats);
   
 }
   // Show or hide the categories initially
   visible.show("bar");
   visible.show("cafe");
   visible.show("hotel");
   visible.hide("disco");
   makeSidebar();
  }
 }; request.send(null);
}
 
 
var compareCats = function(a, b) {
 
 var n1 = a.name;
 // Treat German umlauts like non-umlauts
 n1 = n1.toLowerCase();
 n1 = n1.replace(/ä/g,"a");
 n1 = n1.replace(/ö/g,"o");
 n1 = n1.replace(/ü/g,"u");
 n1 = n1.replace(/ß/g,"s");
 
 var n2 = b.name;
 
 n2 = n2.toLowerCase();
 n2 = n2.replace(/ä/g,"a");
 n2 = n2.replace(/ö/g,"o");
 n2 = n2.replace(/ü/g,"u");
 n2 = n2.replace(/ß/g,"s");
 
 var c1 = a.category;
 var c2 = b.category;
 
 // Sort categories and names
 if(a.category == b.category){
  if(a.name == b.name){
   return 0;
  }
   return (a.name < b.name) ? -1 : 1;
 }
 
 return (a.category < b.category) ? -1 : 1;
}
 
//]]>
</script>

Open in new window

Pieter Marais

Hi there,

All you need is a function that moves the center of the map to a new location and zoom level.

I have added an example below.

Hope it helps ^_^

<a href="#" onclick="moveMapto(52.2195,-5,5);return false;">Cambridgeshire</a>
 
function moveMapto(lat,lng,zoom){
    map.setCenter(new GLatLng(lat,lng),zoom);
}

Open in new window

satmanuk

ASKER

Hi thanks for the reply.

The bit i dont get is how to include your script into the section where the sidebar is generated.

i think its this section of code:

 // Rebuild the sidebar to match currently displayed markers
 function makeSidebar() {
 
  var oldheader;
 
  var html = "";
  for(var i= 0; i < gmarkers.length; i++) {
   if(!gmarkers[i].isHidden()) {
 
   var header = gmarkers[i].category;
   header = header.replace(/^./, header.charAt(0).toUpperCase());
    if (oldheader != header) html += "<br \/><li><b>"+ header+"</b></li>";
    html += '<a id="'+ gmarkers[i].id+'" href="javascript:Info('+i+')" onmouseover="hover.over(this.id)" onmouseout="hover.out(this.id)">' + gmarkers[i].name + '<\/a><br \/>';
    oldheader = header;
   }
  }
  document.getElementById("sidebar").innerHTML = html;
 }

Open in new window

satmanuk

ASKER

i have alost done it. somethig not working with the countyLat variable from the XML file.

onclick="moveMapto('+countyLat+',-3,6);return false;">'+ header+'</a>

any ideas?

 // Rebuild the sidebar to match currently displayed markers
 function makeSidebar() {
 
  var oldheader;
 
  var html = "";
  for(var i= 0; i < gmarkers.length; i++) {
   if(!gmarkers[i].isHidden()) {
	
	
   var header = gmarkers[i].category;
   header = header.replace(/^./, header.charAt(0).toUpperCase());
    if (oldheader != header) html += '<br \/><li><b><a href="#" onclick="moveMapto('+countyLat+',-3,6);return false;">'+ header+'</a></b></li>';
    html += '<a id="'+ gmarkers[i].id+'" href="javascript:Info('+i+')" onmouseover="hover.over(this.id)" onmouseout="hover.out(this.id)">' + gmarkers[i].name + '<\/a><br \/>';
    oldheader = header;
   }
  }
  document.getElementById("sidebar").innerHTML = html;
 }
 
 // function to deal with having the county headings links to a new location and zoom
function moveMapto(lat,lng,zoom){
    map.setCenter(new GLatLng(lat,lng),zoom);
}

Open in new window

Pieter Marais

Viewing the "old" script you have first added, I can't seem to find where you create the variable "countylat". Did you forget to create it, or is it loaded via another script?

Also, remember that the function "moveMapto(lat,lng,zoom)" takes the counties' latitude as the first argument, longitude as the second argument and the third is the zoom level.

Can you perhaps paste the latest version of this script, after the modifications you made? Maybe I'm just missing something that may be in there somewhere...

satmanuk

ASKER

what i just posted was the recent script. the variable countyLat comes from the XML file GoogleMarkers.php.

<script type="text/javascript">
//<![CDATA[
 
 var map, actual;
 var gmarkers = [];
 
 
 var ltblue = new GIcon();
 ltblue.image= "http://local.google.com/mapfiles/ms/icons/ltblue-dot.png";
 addIcon(ltblue);
 
 var pink = new GIcon();
 pink.image= "http://www.google.com/intl/en_de/mapfiles/ms/icons/pink-dot.png";
 addIcon(pink);
 
 var blue = new GIcon();
 blue.image= "http://local.google.com/mapfiles/ms/icons/blue-dot.png";
 addIcon(blue);
 
 var brown = new GIcon();
 brown.image= "images/brown-dot.png";
 addIcon(brown);
 
 var icons = { "SouthYorkshire": pink, "Cambridgeshire": brown, "Devon": ltblue, "Lincolnshire": blue };
 
function addIcon(icon) { // Add icon attributes for all icons
 
 icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
 icon.iconSize = new GSize(32, 32);
 icon.shadowSize = new GSize(37, 34);
 icon.iconAnchor = new GPoint(9, 34);
 icon.infoWindowAnchor = new GPoint(19, 2);
 icon.infoShadowAnchor = new GPoint(18, 25);
}
 
 // Create the markers and set up the event window
 function createMarker(point, name, html, category, id) {
  var marker = new GMarker(point, icons[category] );
   // Store category, name, id and icon as marker properties
   marker.category = category;
   marker.name = name;
   marker.id = id;
   marker.icon = icons[category];
   GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
   });
  // Hovering over the markers
  GEvent.addListener(marker, "mouseover", function() {
   marker.setImage("images/white-dot.png");
   var hovered = document.getElementById(id);
   if(hovered) {
    hovered.className = "focus";
    actual = hovered; // Store this element
   }
  });
 
  GEvent.addListener(marker, "mouseout", function() {
    marker.setImage(icons[category].image);
     if(actual) { actual.className= "normal"; }
  });
 
  gmarkers.push(marker);
  return marker;
 }
 
 
var hover = { // Hovering over the links
 over: function(id) {
  // Set another background color for the link
  var hovered = document.getElementById(id);
  hovered.className = "focus";
 
  // Set another marker icon
  for(var i =0; i < gmarkers.length; i++) {
   if(gmarkers[i].id == id) {
    gmarkers[i].setImage("images/white-dot.png");
   }
  }
 },
 
 out: function(id) {
  // Set the default link background
  var hovered = document.getElementById(id);
  hovered.className = "normal";
 
  // Set the default marker icon
  for(var i =0; i < gmarkers.length; i++) {
   if(gmarkers[i].id == id) {
    gmarkers[i].setImage(gmarkers[i].icon.image);
   }
  }
 }
}
 
var visible= { // Make a category (un)visible
 show: function(category) {
  // Show all markers of one category
  for(var i= 0; i < gmarkers.length; i++) {
   if(gmarkers[i].category == category) {
    gmarkers[i].show();
   }
  }
   // Set the checkbox to true
   document.getElementById(category).checked = true;
 },
 
 hide: function(category) {
  // Hide all markers of one category
  for(var i= 0; i < gmarkers.length; i++) {
   if(gmarkers[i].category == category) {
    gmarkers[i].hide();
   }
  }
  // Clear the checkbox of a hidden category
  document.getElementById(category).checked = false;
  map.closeInfoWindow();
 }
}
 
 function boxclick(box, category) {
 
  // Hide or show the category of the clicked checkbox
  if(box.checked) { visible.show(category); }
  else { visible.hide(category); }
 
  // Rebuild the sidebar
  makeSidebar();
 }
 
 // Trigger the clicks from the sidebar to open the appropriate infowindow
 function Info(i) {
  GEvent.trigger(gmarkers[i],"click");
 }
 
 
 // Rebuild the sidebar to match currently displayed markers
 function makeSidebar() {
 
  var oldheader;
 
  var html = "";
  for(var i= 0; i < gmarkers.length; i++) {
   if(!gmarkers[i].isHidden()) {
	
	//var countyLat = gmarkers[i].countyLat;	
   	var header = gmarkers[i].category;
   header = header.replace(/^./, header.charAt(0).toUpperCase());
    if (oldheader != header) html += '<br \/><li><b><a href="#" onclick="moveMapto('+gmarkers[i].countyLat+',-3,6);return false;">'+ header+'</a></b></li>';
    html += '<a id="'+ gmarkers[i].id+'" href="javascript:Info('+i+')" onmouseover="hover.over(this.id)" onmouseout="hover.out(this.id)">' + gmarkers[i].name + '<\/a><br \/>';
    oldheader = header;
   }
  }
  document.getElementById("sidebar").innerHTML = html;
 }
 
 // function to deal with having the county headings links to a new location and zoom
function moveMapto(lat,lng,zoom){
    map.setCenter(new GLatLng(lat,lng),zoom);
}
 
 // Create the map
 function load() {
  if(GBrowserIsCompatible()) {
   map = new GMap2(document.getElementById("map"));
   map.addMapType(G_PHYSICAL_MAP);
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   //map.enableContinuousZoom();
   map.enableScrollWheelZoom();
   map.setCenter(new GLatLng(52.2195,-5),5, G_SATELLITE_MAP);
   readData(); 
  }
 }
 
 
function readData() {
 
 var request = GXmlHttp.create();
 request.open("GET", "GoogleMarkers.php", true);
 request.onreadystatechange = function() {
  if(request.readyState == 4) {
  // Use the browsers XML parser
  // var xml = request.responseXML;
 
  // Use Googles XML parser
  var xml = GXml.parse(request.responseText);
 
   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 GLatLng(lat,lng,13);
    var address = markers[i].getAttribute("address");
    var id = markers[i].getAttribute("nr");
    var name = markers[i].getAttribute("name");
    var html = "<b>"+name+"<\/b><p style='font-size:smaller'>" + address + "<\/p>";
    var category = markers[i].getAttribute("category");
    // Create the markers
    map.addOverlay(createMarker(point, name, html, category, id));
   }
 
 if(gmarkers) {
 
   // Sort categories and names to display
   // both in alphabetic order
   gmarkers.sort(compareCats);
   
 }
   // Show or hide the categories initially
   visible.show("bar");
   visible.show("cafe");
   visible.show("hotel");
   visible.hide("disco");
   makeSidebar();
  }
 }; request.send(null);
}
 
 
var compareCats = function(a, b) {
 
 var n1 = a.name;
 // Treat German umlauts like non-umlauts
 n1 = n1.toLowerCase();
 n1 = n1.replace(/ä/g,"a");
 n1 = n1.replace(/ö/g,"o");
 n1 = n1.replace(/ü/g,"u");
 n1 = n1.replace(/ß/g,"s");
 
 var n2 = b.name;
 
 n2 = n2.toLowerCase();
 n2 = n2.replace(/ä/g,"a");
 n2 = n2.replace(/ö/g,"o");
 n2 = n2.replace(/ü/g,"u");
 n2 = n2.replace(/ß/g,"s");
 
 var c1 = a.category;
 var c2 = b.category;
 
 // Sort categories and names
 if(a.category == b.category){
  if(a.name == b.name){
   return 0;
  }
   return (a.name < b.name) ? -1 : 1;
 }
 
 return (a.category < b.category) ? -1 : 1;
}
 
//]]>
</script>

Open in new window

satmanuk

ASKER

Ok i have relaised whats partially wrong. I was assuming the variable was being pulled in from the XML file but i didnt have a var assigned for that data from the xml file.

i have added this line

var countyLat = parseFloat(markers[i].getAttribute("countyLat"));

The problem is the sidebar contents dont load at all.

is this the correct syntax for including the variable countyLat?
<a href="#" onclick="moveMapto('+countyLat+',-3,6);return false;">'+ header+'</a>

For test purposes i have put a number in place of '+countyLat+' and this sidebar loads fine and the map works ok.
I have also viewed the XML file and the field data for countyLat is being pulled from the DB as it should be so i am fairly confident the data is in the countyLat variable.

Almost there!

Thanks for your help i appreciate your time on this.

<script type="text/javascript">
//<![CDATA[
 
 var map, actual;
 var gmarkers = [];
 
 
 var ltblue = new GIcon();
 ltblue.image= "http://local.google.com/mapfiles/ms/icons/ltblue-dot.png";
 addIcon(ltblue);
 
 var pink = new GIcon();
 pink.image= "http://www.google.com/intl/en_de/mapfiles/ms/icons/pink-dot.png";
 addIcon(pink);
 
 var blue = new GIcon();
 blue.image= "http://local.google.com/mapfiles/ms/icons/blue-dot.png";
 addIcon(blue);
 
 var brown = new GIcon();
 brown.image= "images/brown-dot.png";
 addIcon(brown);
 
 var icons = { "SouthYorkshire": pink, "Cambridgeshire": brown, "Devon": ltblue, "Lincolnshire": blue };
 
function addIcon(icon) { // Add icon attributes for all icons
 
 icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
 icon.iconSize = new GSize(32, 32);
 icon.shadowSize = new GSize(37, 34);
 icon.iconAnchor = new GPoint(9, 34);
 icon.infoWindowAnchor = new GPoint(19, 2);
 icon.infoShadowAnchor = new GPoint(18, 25);
}
 
 // Create the markers and set up the event window
 function createMarker(point, name, html, category, id) {
  var marker = new GMarker(point, icons[category] );
   // Store category, name, id and icon as marker properties
   marker.category = category;
   marker.name = name;
   marker.id = id;
   marker.icon = icons[category];
   GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
   });
  // Hovering over the markers
  GEvent.addListener(marker, "mouseover", function() {
   marker.setImage("images/white-dot.png");
   var hovered = document.getElementById(id);
   if(hovered) {
    hovered.className = "focus";
    actual = hovered; // Store this element
   }
  });
 
  GEvent.addListener(marker, "mouseout", function() {
    marker.setImage(icons[category].image);
     if(actual) { actual.className= "normal"; }
  });
 
  gmarkers.push(marker);
  return marker;
 }
 
 
var hover = { // Hovering over the links
 over: function(id) {
  // Set another background color for the link
  var hovered = document.getElementById(id);
  hovered.className = "focus";
 
  // Set another marker icon
  for(var i =0; i < gmarkers.length; i++) {
   if(gmarkers[i].id == id) {
    gmarkers[i].setImage("images/white-dot.png");
   }
  }
 },
 
 out: function(id) {
  // Set the default link background
  var hovered = document.getElementById(id);
  hovered.className = "normal";
 
  // Set the default marker icon
  for(var i =0; i < gmarkers.length; i++) {
   if(gmarkers[i].id == id) {
    gmarkers[i].setImage(gmarkers[i].icon.image);
   }
  }
 }
}
 
var visible= { // Make a category (un)visible
 show: function(category) {
  // Show all markers of one category
  for(var i= 0; i < gmarkers.length; i++) {
   if(gmarkers[i].category == category) {
    gmarkers[i].show();
   }
  }
   // Set the checkbox to true
   document.getElementById(category).checked = true;
 },
 
 hide: function(category) {
  // Hide all markers of one category
  for(var i= 0; i < gmarkers.length; i++) {
   if(gmarkers[i].category == category) {
    gmarkers[i].hide();
   }
  }
  // Clear the checkbox of a hidden category
  document.getElementById(category).checked = false;
  map.closeInfoWindow();
 }
}
 
 function boxclick(box, category) {
 
  // Hide or show the category of the clicked checkbox
  if(box.checked) { visible.show(category); }
  else { visible.hide(category); }
 
  // Rebuild the sidebar
  makeSidebar();
 }
 
 // Trigger the clicks from the sidebar to open the appropriate infowindow
 function Info(i) {
  GEvent.trigger(gmarkers[i],"click");
 }
 
 
 // Rebuild the sidebar to match currently displayed markers
 function makeSidebar() {
 
  var oldheader;
 
  var html = "";
  for(var i= 0; i < gmarkers.length; i++) {
   if(!gmarkers[i].isHidden()) {
	
	//var countyLat = gmarkers[i].countyLat;	
   	var header = gmarkers[i].category;
   header = header.replace(/^./, header.charAt(0).toUpperCase());
    if (oldheader != header) html += '<br \/><li><b><a href="#" onclick="moveMapto('+countyLat+',-3,6);return false;">'+ header+'</a></b></li>';
    html += '<a id="'+ gmarkers[i].id+'" href="javascript:Info('+i+')" onmouseover="hover.over(this.id)" onmouseout="hover.out(this.id)">' + gmarkers[i].name + '<\/a><br \/>';
    oldheader = header;
   }
  }
  document.getElementById("sidebar").innerHTML = html;
 }
 
 // function to deal with having the county headings links to a new location and zoom
function moveMapto(lat,lng,zoom){
    map.setCenter(new GLatLng(lat,lng),zoom);
}
 
 // Create the map
 function load() {
  if(GBrowserIsCompatible()) {
   map = new GMap2(document.getElementById("map"));
   map.addMapType(G_PHYSICAL_MAP);
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   //map.enableContinuousZoom();
   map.enableScrollWheelZoom();
   map.setCenter(new GLatLng(52.2195,-5),5, G_SATELLITE_MAP);
   readData(); 
  }
 }
 
 
function readData() {
 
 var request = GXmlHttp.create();
 request.open("GET", "GoogleMarkers.php", true);
 request.onreadystatechange = function() {
  if(request.readyState == 4) {
  // Use the browsers XML parser
  // var xml = request.responseXML;
 
  // Use Googles XML parser
  var xml = GXml.parse(request.responseText);
 
   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 GLatLng(lat,lng,13);
    var address = markers[i].getAttribute("address");
    var id = markers[i].getAttribute("nr");
    var name = markers[i].getAttribute("name");
    var html = "<b>"+name+"<\/b><p style='font-size:smaller'>" + address + "<\/p>";
    var category = markers[i].getAttribute("category");
	var countyLat = parseFloat(markers[i].getAttribute("countyLat"));
    // Create the markers
    map.addOverlay(createMarker(point, name, html, category, id));
   }
 
 if(gmarkers) {
 
   // Sort categories and names to display
   // both in alphabetic order
   gmarkers.sort(compareCats);
   
 }
   // Show or hide the categories initially
   visible.show("bar");
   visible.show("cafe");
   visible.show("hotel");
   visible.hide("disco");
   makeSidebar();
  }
 }; request.send(null);
}
 
 
var compareCats = function(a, b) {
 
 var n1 = a.name;
 // Treat German umlauts like non-umlauts
 n1 = n1.toLowerCase();
 n1 = n1.replace(/ä/g,"a");
 n1 = n1.replace(/ö/g,"o");
 n1 = n1.replace(/ü/g,"u");
 n1 = n1.replace(/ß/g,"s");
 
 var n2 = b.name;
 
 n2 = n2.toLowerCase();
 n2 = n2.replace(/ä/g,"a");
 n2 = n2.replace(/ö/g,"o");
 n2 = n2.replace(/ü/g,"u");
 n2 = n2.replace(/ß/g,"s");
 
 var c1 = a.category;
 var c2 = b.category;
 
 // Sort categories and names
 if(a.category == b.category){
  if(a.name == b.name){
   return 0;
  }
   return (a.name < b.name) ? -1 : 1;
 }
 
 return (a.category < b.category) ? -1 : 1;
}
 
//]]>
</script>

Open in new window

satmanuk

ASKER

i have been testing a few things and i found that in the script im using the variable needed to look like
gmarkers[i].variablename
i added a variable called testcountyLat and assigned gmarkers[i].countyLat to it.

This seems to do the trick but the google map dies when the category is clicked. When i say dies i mean you caanot see the map, but you can see the markers. It does apear to jump from county to county but as the map is not showing i cannot be sure.

Any ideas?

So the current state of play is at first you load the page and the map is there with sidebar containing categores and links when the county(category) is clicked the map no longer shows and its has text saying

"We are sorry, we dont have imagery at this zoom level, try zooming out for a broader look"

I have tried to zoom out but the same message is there instead of the map at every zoom level.

It seems the code works but it has broken something to do with the zoom level

 // Rebuild the sidebar to match currently displayed markers
 function makeSidebar() {
 
  var oldheader;
 
  var html = "";
  for(var i= 0; i < gmarkers.length; i++) {
   if(!gmarkers[i].isHidden()) {
	
	//var countyLat = gmarkers[i].countyLat;	
   	var header = gmarkers[i].category;
	var testcountLat = gmarkers[i].countyLat;
   header = header.replace(/^./, header.charAt(0).toUpperCase());
    if (oldheader != header) html += '<br \/><li><b><a href="#" onclick="moveMapto('+ testcountLat +',-3,5);return false;">'+ header+'</a></b></li>';
    html += '<a id="'+ gmarkers[i].id+'" href="javascript:Info('+i+')" onmouseover="hover.over(this.id)" onmouseout="hover.out(this.id)">' + gmarkers[i].name + '<\/a><br \/>';
    oldheader = header;
   }
  }
  document.getElementById("sidebar").innerHTML = html;
 }
 
 // function to deal with having the county headings links to a new location and zoom
function moveMapto(lat,lng,zoom){
    map.setCenter(new GLatLng(lat,lng),zoom);
}
 
 // Create the map
 function load() {
  if(GBrowserIsCompatible()) {
   map = new GMap2(document.getElementById("map"));
   map.addMapType(G_PHYSICAL_MAP);
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   //map.enableContinuousZoom();
   map.enableScrollWheelZoom();
   map.setCenter(new GLatLng(52.2195,-5),5, G_SATELLITE_MAP);
   readData(); 
  }
 }

Open in new window

Pieter Marais

That might have been a mistake on my part. I have added a new "moveMapto" below. I have added a map type to the function.

Also, remember that you need both a latitude and longitude to move to a different location. I noticed that you currently are just using the latitude of a county "countyLat" and that you have hard coded the longitude as "-3".

Is it possible for you to attach a sample of the xml data you are using?

function moveMapto(lat,lng,zoom){
    map.setCenter(new GLatLng(lat,lng),zoom,G_SATELLITE_MAP);
}

Open in new window

satmanuk

ASKER

Hi again,

yes i know i have static lng, zoom and sat view. When i am trying to get something to work for the first time i only ty a bit at a time so there is fewer things to break.

My theory is if i can get the map category links to work on Lat then i can easily aply the DB stuff to the other coordinates later. So they are fioxed for ease of testing.

I tried your modified function but its the same.

Here is my xml file.

mysql_select_db($database_reg_con, $reg_con);
$query_rts_shops = "SELECT counties.county_lat AS countyLat, counties.county_lng AS countyLng, shops.shop_id, shops.venue, shops.county, shops.lat, shops.lng, shops.img FROM shops inner join counties on shops.county = counties.county_name ORDER BY shops.county ASC";
$rts_shops = mysql_query($query_rts_shops, $reg_con) or die(mysql_error());
$row_rts_shops = mysql_fetch_assoc($rts_shops);
$totalRows_rts_shops= mysql_num_rows($rts_shops);
?>
<? header('Content-type: text/xml'); ?>
<markers>
<?php do { ?>
 
  <marker nr='<?php echo $row_rts_shops['shops_id']; ?>' lat='<?php echo $row_rts_shops['lat']; ?>' lng='<?php echo $row_rts_shops['lng']; ?>' html='&lt;div style="width:310px"&gt;<?php echo $row_rts_shops['venue']; ?>.&lt;image src="images/<?php echo $row_rts_shops['img']; ?>" width=300 height=245&gt;&lt;/div&gt;'  name='<?php echo $row_rts_shops['venue']; ?>' category='<?php echo $row_rts_shops['county']; ?>' countyLat='<?php echo $row_rts_shops['countyLat']; ?>' countyLng='<?php echo $row_rts_shops['countyLng']; ?>'/>
    
<?php } while ($row_rts_shops = mysql_fetch_assoc($rts_shops)); ?>
</markers>
<?php mysql_free_result($rts_shops); ?>

Open in new window

satmanuk

ASKER

ok the problem is the variable testcountLat is undefined.

For test purposes i have replaced the header variable that gets echo'd out in the a href with testcountLat.

This way i can easily look at the page and see the variable printed.

I have assigned a Lattitude to that variable and the map works fine so clearly the problem lies with my method of getting the data from the XML file.

I have to say i am fairly new to javascript, im literally using it because i want to utlise the google api.
I looked at the code and saw that the javascript is using variables with data from the XMl file so im trying to follow the same logic in getting the county data from the XML.

i thought that seeing that i have a variable var header = gmarkers[i].category; and that data is coming from the XML file, i thought i could use var testcountLat = gmarkers[i].countylat;

obviously i am wrong and i have confirmed this by trying other data from the XML file.

I will keep testing, let me know if you have any ideas where i am going wrong.

Thanks

satmanuk

ASKER

sorry
follow the same logic in getting the county data from the XML.

should read

follow the same logic in getting the countyLat data from the XML.

Pieter Marais

Ok, i know where the problem might be.

In your readData function, you have the following loop:

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 GLatLng(lat,lng,13);
var address = markers[i].getAttribute("address");
var id = markers[i].getAttribute("nr");
var name = markers[i].getAttribute("name");
var html = "<b>"+name+"<\/b><p style='font-size:smaller'>" + address + "<\/p>";
var category = markers[i].getAttribute("category");
var countyLat = parseFloat(markers[i].getAttribute("countyLat"));
// Create the markers
map.addOverlay(createMarker(point, name, html, category, id));
}

It looks like this is the place where you are trying to read the data from the feed.
The thing is, the variables created here is destroyed as soon as the loop is ended.
You will have to find anotherway to store there variables. Give me a moment and I'll
see if i can come up with an object.

ASKER CERTIFIED SOLUTION

Pieter Marais

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

satmanuk

ASKER

Very helpful!

satmanuk

ASKER

It works! thanks very much for your help!

Regards :)