Google Maps v3 Zooming specific location

Question

i'm still learning the javascript not much pro, and this is my 1st post.

JavaScript

function initialize() {

     // Create the map 
     // No need to specify zoom and center as we fit the map further down.
     var map = new google.maps.Map(document.getElementById("map_canvas"), {
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         streetViewControl: false,

     });

     // Create the shared infowindow with two DIV placeholders
     // One for a text string, the other for the StreetView panorama.
     var content = document.createElement("DIV");
     var title = document.createElement("DIV");
     content.appendChild(title);
     var streetview = document.createElement("DIV");
     streetview.style.width = "200px";
     streetview.style.height = "200px";
     content.appendChild(streetview);
     var infowindow = new google.maps.InfoWindow({
         content: content
     });


     var markers = [{
         lat: 35.15074,
         lng: -89.955992,
         name: "Bob 1"
     }, {
         lat: 35.149425,
         lng: -89.946595,
         name: "Bob 2"
     }, {
         lat: 35.146687,
         lng: -89.929837,
         name: "Bob 3"
     }, {
         lat: 35.132264,
         lng: -89.937197,
         name: "Bob 4"
     }];

     // Create the markers
     for (index in markers) addMarker(markers[index]);

     function addMarker(data) {
         var marker = new google.maps.Marker({
             position: new google.maps.LatLng(data.lat, data.lng),
             map: map,
             title: data.name
         });

         google.maps.event.addListener(marker, "click", function () {
             openInfoWindow(marker);
         });
     }

     // Zoom and center the map to fit the markers
     // This logic could be conbined with the marker creation.
     // Just keeping it separate for code clarity.
     var bounds = new google.maps.LatLngBounds();
     for (index in markers) {
         var data = markers[index];
         bounds.extend(new google.maps.LatLng(data.lat, data.lng));
     }
     map.fitBounds(bounds);

     // Handle the DOM ready event to create the StreetView panorama
     // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
     var panorama = null;
     var pin = new google.maps.MVCObject();
     google.maps.event.addListenerOnce(infowindow, "domready", function () {
         panorama = new google.maps.StreetViewPanorama(streetview, {
             navigationControl: false,
             enableCloseButton: false,
             addressControl: false,
             linksControl: false,
             visible: true
         });
         panorama.bindTo("position", pin);
     });

     // Set the infowindow content and display it on marker click.
     // Use a 'pin' MVCObject as the order of the domready and marker click events is not garanteed.
     function openInfoWindow(marker) {
         title.innerHTML = marker.getTitle();
         pin.set("position", marker.getPosition());
         infowindow.open(map, marker);
     }
 }

I had the 4 different places, then i need the 4 webpages to add, how to i tell the browser that i want zooming the specific location. let's say i wanted to zooming at "Bob 1". Then i rename the webpage as bob1.html. Whenever i click the bob1.html the webpage will zooming zoom: 15 and the marker is center on the map

Answer 1

You don't need to have four different pages unless this is part of the spec?

To set the position and zoom level of the map simply call:

map.setCenter(yourLatLngOrMarkerPosition);

And to set the zoom level:

map.setZoom(yourZoomLevel);

These could be set at any point after the instantiation of the map so perhaps on button clicks or after a period of time?

Hope this helps.

Edit To take into account your requirements (mentioned in the comments) I would submit the relevant url post parameters upon clicking the link. Within the initialize function of each map page you will then need to read these out using something similar to Here (though this uses jQuery) and set the map options as appropriate.

Edit You can read the url post parameters out with php and then echo them in the appropriate places within the google maps calls.

For Example:

map.setZoom(<?php echo $_GET['urlZoomParam'];?>);

Etc.

Some general PHP/MYSQL/Google Maps stack docs: https://developers.google.com/maps/articles/phpsqlajax_v3 https://developers.google.com/maps/articles/phpsqlsearch_v3 http://theoryapp.com/online-store-locator-using-php-mysql-and-google-maps/