zoom and center on click

34 views

Skip to first unread message

h20boynz

unread,

Jan 10, 2012, 7:26:45 PM1/10/12

to google-map...@googlegroups.com

Hi folks

Firstly I am a bit of a newbie...I am working through http://code.google.com/apis/maps/articles/phpsqlajax_v3.html this tutorial and it is going well so far.

Now I am trying to get a bit creative with it but I am having difficulty with a click event.

Basically, all I want to do now is be able to zoom and center on a marker when clicked. I cannot for the life of me figure out how to do this. Any help will be appreciated!

Here's the code thus far:

[code]

//<![CDATA[

    var customIcons = {
      harbour: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
      lake: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(-36.818, 174.913),
        zoom: 6,
        mapTypeId: 'hybrid'
      });

var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          //var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));

          bindInfoWindow(marker, map, infoWindow, html);
        }
      });

    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
      infoWindow.setContent(html);
      infoWindow.open(map, marker);
      });
}

    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, request.status);
        }
      };

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

function doNothing() {}

//]]>
</script>
</head>