Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

Google Maps Api how to set zoom on marker

Avatar of satmanuk
satmanukFlag for United Kingdom of Great Britain and Northern Ireland asked on
JavaScriptWeb Applications
15 Comments1 Solution8253 ViewsLast Modified:
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>
ASKER CERTIFIED SOLUTION
Avatar of Pieter Marais
Pieter MaraisFlag of South Africa imageSenior Developer

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Commented:
This problem has been solved!
Unlock 1 Answer and 15 Comments.
See Answers