Question

I am building a store locator using php sql and javascript. I’ve done this tutorial https://developers.google.com/maps/articles/phpsqlsearch_v3 and got it working. I am trying to implement zoom in/out links on the infoWindows, for when the user clicks a marker. Its not working, in FireFox I am getting no errors in the console. In Chrome I am getting Uncaught TypeError: Object # has no method ‘setCenter’

Ive been searching the forums but have been unable to find a solution. Sorry I dont have a version online to look at, working locally. Below is the script I am using.

var map  = null;
var markers = [];
var infoWindow;
var locationSelect;
//On page load Create a google map in #map
//Set default cordinates & Map style to roadmap
function load() {
var myOptions = {
  zoom: 8,
  center: new google.maps.LatLng(43.907787,-79.359741),
  mapTypeControl: true,
  mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  navigationControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions); 
infoWindow = new google.maps.InfoWindow({ 
  size: new google.maps.Size(150,50)
});
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
  var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
  if (markerNum != "none") {
    google.maps.event.trigger(markers[markerNum], 'click');
  }
};
}

//Search for LAT/LNG of a place using its address using Google Maps Geocoder
 function searchLocations() {
  var address = document.getElementById("addressInput").value;
 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({address: address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
    searchLocationsNear(results[0].geometry.location);
   } else {
     alert(address + ' not found');
   }
 });
}

//Clears Prve location, in info box
function clearLocations() {
 infoWindow.close();
 for (var i = 0; i < markers.length; i++) {
   markers[i].setMap(null);
 }
 markers.length = 0;
 locationSelect.innerHTML = "";
 var option = document.createElement("option");
 option.value = "none";
 option.innerHTML = "See all results:";
 locationSelect.appendChild(option);
}

 //Look for locations near by and loop through all data getting lat & lng of each marker
 function searchLocationsNear(center) {
 clearLocations();

 var radius = document.getElementById('radiusSelect').value;
 var searchUrl = 'http://localhost:8888/starward/wp-content/themes/starward/map_request.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
 downloadUrl(searchUrl, function(data) {
   var xml = parseXml(data);
   var markerNodes = xml.documentElement.getElementsByTagName("marker");
   var bounds = new google.maps.LatLngBounds();
   for (var i = 0; i < markerNodes.length; i++) {
     var name = markerNodes[i].getAttribute("name");
     var address = markerNodes[i].getAttribute("address");
     var distance = parseFloat(markerNodes[i].getAttribute("distance"));
     var zoom = 18;
     var latlng = new google.maps.LatLng(
          parseFloat(markerNodes[i].getAttribute("lat")),
          parseFloat(markerNodes[i].getAttribute("lng"))); 

     createOption(name, distance, i);
     createMarker(latlng, name, address,zoom);
     bounds.extend(latlng);
   }
   map.fitBounds(bounds);
   map.setZoom(11);
   // map.setCenter(center);
   locationSelect.style.visibility = "visible";
   locationSelect.onchange = function() {
     var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
     google.maps.event.trigger(markers[markerNum], 'click');
   };
  });
}


//Creates marker on the map
//Adds event for user when they click address info pops up
function createMarker(latlng, name, address, zoom) {
  //var html = "<b>" + name + "</b> <br/>" + address 
  // add the zoom links
  var html =  "<b>" + name + "</b> <br/>" + address 
  html += '<br><a  href="javascript: map.setZoom('+zoom+');">Zoom To</a>';
  html += ' <a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+1);">[+]</a>';
  html += ' <a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-1);">[-]</a>';

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  marker.MyZoom = zoom;
  markers.push(marker);
}

function createOption(name, distance, num) {
  var option = document.createElement("option");
  option.value = num;
  option.innerHTML = name + "(" + distance.toFixed(1) + ")";
  locationSelect.appendChild(option);
}
//Look up XML sheet to get data
function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      callback(request.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

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');
  }
}

Answer 1

It works for me in both IE and Firefox. Although to me the behavior makes more sense if I set the center for the “ZoomTo” link as well:

html += '<br><a  href="javascript: map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+'));map.setZoom('+zoom+');">Zoom To</a>';