Google Maps v3 Масштабирование определенного местоположения

Question

Я все еще изучаю javascript, не очень профессиональный, и это мой первый пост.

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

У меня было 4 разных местах, то мне нужно 4 веб-страниц, чтобы добавить, как я сказать браузеру, что я хочу масштабирования конкретное место. скажем, я хотел масштабировать «Боб 1». Затем я переименовал веб-страницу как bob1.html. Всякий раз, когда я нажимаю на bob1.html, страница будет масштабироваться zoom: 15, а маркер - на карте.

Answer 1

Вам не нужно иметь четыре разных страницы, если это не часть спецификации?

Чтобы задать положение и уровень масштабирования карты просто позвонить:

map.setCenter(yourLatLngOrMarkerPosition); 

и установить уровень масштабирования:

map.setZoom(yourZoomLevel); 

Они могут быть установлены в любой точке после инстанциации карту, возможно, при нажатии кнопки или после определенного периода времени?

Надеюсь, это поможет.

Редактировать Чтобы принять во внимание ваши требования (упомянутые в комментариях), я должен отправить соответствующие параметры почтового сообщения после нажатия ссылки. Внутри функции инициализации каждой страницы карты вам нужно будет прочитать их, используя что-то похожее на Here (хотя это использует jQuery) и, при необходимости, задайте параметры карты.

Редактировать Вы можете прочитать параметры почтового сообщения с помощью php и затем эхо их в соответствующих местах в вызовах карт Google.

Для примера:

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

Etc.

Некоторые общие PHP/MYSQL/Google Maps складывают документы: https://developers.google.com/maps/articles/phpsqlajax_v3https://developers.google.com/maps/articles/phpsqlsearch_v3http://theoryapp.com/online-store-locator-using-php-mysql-and-google-maps/