Google Maps API v3: Jak ustawić poziom powiększenia i centrum mapy do przesłanej przez użytkownika lokalizacji?

Question

Użyłem samouczek z Google, aby zbudować aplikację internetową, która znajdzie najbliższy sklep z użytkownikiem wszedł lokalizację:

http://code.google.com/apis/maps/articles/phpsqlsearch_v3.html

Mam app niemal pracuje tak, jak chcesz, po stronie obciążenia, mapa jest załadowana, wyśrodkowana i ustawiona na poziom powiększenia 6, a użytkownik wypełnia formularz swoją lokalizacją.

Aplikacja pobiera wszystkie informacje o sklepie z bazy danych i zapełnia mapę znacznikiem każdego z nich.

Poziom powiększenia również wydaje się zmniejszać, ale nie mogę go znaleźć w kodzie.

To, co chcę zrobić, to powiększyć obraz w celu powiększenia poziomu 6 i wyśrodkować mapę na szerokość i długość geograficzną wprowadzonej przez użytkownika lokalizacji oraz dane wyjściowe w najbliższych sklepach, np. Najbliższą 5. Zastanawiam się, czy ktoś tutaj wiedział, jak wdrożyć tę funkcję?

index.php

<div> 
    <input type="text" id="addressInput" size="50"/> 
    <input type="hidden" id="radiusSelect" value="5"/> 
    <input type="button" onclick="searchLocations()" value="Search"/> 
</div> 
<div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div> 
<div id="map" style="width:100%; height:50%"></div> 



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
var map; 
var markers = []; 
var infoWindow; 
var locationSelect; 

function load() { 
    map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(54.600939134593, -2.399894114594), 
    zoom: 6, 
    mapTypeId: 'roadmap', 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} 
    }); 
    infoWindow = new google.maps.InfoWindow(); 

    locationSelect = document.getElementById("locationSelect"); 
    locationSelect.onchange = function() { 
    var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
    if (markerNum != "none"){ 
     google.maps.event.trigger(markers[markerNum], 'click'); 
    } 
    }; 
} 

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

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

function searchLocationsNear(center) { 
clearLocations(); 

var radius = document.getElementById('radiusSelect').value; 
var searchUrl = 'phpsqlsearch_genxml.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 town = markerNodes[i].getAttribute("town"); 
    var postcode = markerNodes[i].getAttribute("postcode"); 
    var name = markerNodes[i].getAttribute("name"); 
    var address = markerNodes[i].getAttribute("address"); 
    var distance = parseFloat(markerNodes[i].getAttribute("distance")); 
    var latlng = new google.maps.LatLng(
      parseFloat(markerNodes[i].getAttribute("lat")), 
      parseFloat(markerNodes[i].getAttribute("lng"))); 

    var id = markerNodes[i].getAttribute("id"); 
    var fname = markerNodes[i].getAttribute("fname"); 
    var link = '<a href="http://www.domain.co.uk/stores/' + fname + '-' + id + '.html" target="_blank" title="Store: ' + town + '">More info</a>'; 

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

function createMarker(latlng, name, address, town, postcode, link) { 
    var html = "<b>" + town + "</b> <br/>" + address + "<br/>" + postcode + "<br/>" + link; 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: latlng 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
    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); 
} 

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

function doNothing() {} 

//]]> 
</script> 


<script type="text/javascript"> 
    $(document).ready(function() { 
     load(); 
    }); 
</script> 

phpsqlsearch_genxml.php

<?php 
$db_conn = mysql_connect('xxx.xxx.xx.xx', 'xxxxxxxx', 'xxxxxx') or die('error'); 
mysql_select_db('uk_db', $db_conn) or die(mysql_error()); 

// Get parameters from URL 
$center_lat = $_GET["lat"]; 
$center_lng = $_GET["lng"]; 
$radius = $_GET["radius"]; 

if(!$_GET['zoom']) { 
    $_GET['zoom'] = 11; 
} 

// Start XML file, create parent node 
$dom = new DOMDocument("1.0"); 
$node = $dom->createElement("markers"); 
$parnode = $dom->appendChild($node); 


// Select all the rows in the markers table 
$query = 'SELECT address1, address2, address3, longitude, latitude, name, town, store_id, postcode, storenumber 
      FROM uk_store 
      WHERE isActive=1 '; 
if($_GET["region"] != '') { 
    $query .= ' AND region = "' . $_GET["region"] . '"'; 
} else { 
    $query .= ' AND region in("Scotland", "England", "Wales", "Northern Ireland") '; 
} 

// lets start to check what has been search on 
if($_GET['postcode'] != '') { 

    //lets make sure postcode only has numbers letter and spaces 
    $searchparams .= 'postcode=' . $_GET['postcode'] . '&amp;'; 
    $postcode = $_GET['postcode']; 
    $postcode = verifyInput($postcode); 
    $query .= " AND postcode = '" . $postcode . "'"; 

} 

if($_GET['town'] != '') { 
    // make sure town only has letters or spaces. 
    $searchparams .= 'town=' . $_GET['town'] . '&amp;'; 
    $town = $_GET['town']; 
    $town = verifyInput($town); 
    $query .= " AND town = '" . $town . "'"; 
} 

if($_GET['min_lat'] && $_GET['min_long'] && $_GET['max_lat'] && $_GET['max_long']) { 
    $query .= " AND latitude BETWEEN " . $_GET['min_lat'] . " AND " . $_GET['max_lat'] . " AND longitude BETWEEN " . $_GET['min_long'] . " AND " . $_GET['max_long'] ; 
    $mapsearch = 1; 
} 

if(!($_GET['postcodeLat'] && $_GET['postcodeLong'])) { 
    $query .= " ORDER BY Region, Town , Name "; 
} 

$result = mysql_query($query); 
if (!$result) { 
    die("Invalid query: " . mysql_error()); 
} 

header("Content-type: text/xml"); 

echo '<markers>'; 

if($_GET['postcodeLat'] && $_GET['postcodeLong']) 
{ 
    $count = 0; 

    // we need to sort the results by distance 
    while ($row = @mysql_fetch_array($result, MYSQL_ASSOC)) 
    { 
     $address = $row['address1'] . ' ' . $row['address2'] . ' ' . $row['address3']; 
     $distance = distance($_GET['postcodeLat'], $_GET['postcodeLong'], $row['latitude'], $row['longitude']); 
     $row['distance'] = number_format($distance, 2); 
     $row['fname'] = $row['town'] . '-' . $row['name']; 
     $row['fname'] = str_replace("'",'', $row['fname']); 
     $row['fname'] = ereg_replace(' ','-', $row['fname']); 
     $row['fname'] = ereg_replace('\/','-', $row['fname']); 
     $row['fname'] = ereg_replace('\(','', $row['fname']); 
     $row['fname'] = ereg_replace('\)','', $row['fname']); 
     $row['fname'] = strtolower($row['fname']); 
     //get distance and add to $row array 
     $results[$distance.$row['id']] = $row;   
    } 

    ksort($results); 

    foreach ($results as $key => $row) 
    { 
     // ADD TO XML DOCUMENT NODE 
     $address = $row['address1'] . ' ' . $row['address2'] . ' ' . $row['address3']; 
     echo '<marker '; 
     echo 'name="' . parseToXML($row['name']) . '" '; 
     echo 'fname="' . parseToXML($row['fname']) . '" '; 
     echo 'town="' . parseToXML($row['town']) . '" '; 
     echo 'lat="' . $row['latitude'] . '" '; 
     echo 'lng="' . $row['longitude'] . '" '; 
     echo 'id="' . $row['store_id'] . '" '; 
     echo 'address="' . $address . '" '; 
     echo 'distance="' . $row['distance'] . '" '; 
     echo 'postcode="' . $row['postcode'] . '" '; 
     echo 'storenumber="' . $row['storenumber'] . '" '; 
     echo 'address1="' . parsetoXml($row['address1']). '" '; 
     echo 'address2="' . parsetoXml($row['address2']). '" '; 
     echo 'address3="' . parsetoXml($row['address3']). '" '; 
     echo '/>'; 
    } 

} 
else 
{ 
    // Iterate through the rows, printing XML nodes for each 
    while ($row = @mysql_fetch_assoc($result)) 
    { 
     $address = $row['address1'] . ' ' . $row['address2'] . ' ' . $row['address3']; 
     $row['fname'] = $row['town'] . '-' . $row['name']; 
     $row['fname'] = ereg_replace(' ','-', $row['fname']); 
     $row['fname'] = ereg_replace('\/','-', $row['fname']); 
     $row['fname'] = ereg_replace('\(','', $row['fname']); 
     $row['fname'] = ereg_replace('\)','', $row['fname']); 

     // ADD TO XML DOCUMENT NODE 
     echo '<marker '; 
     echo 'name="' . parseToXML($row['name']) . '" '; 
     echo 'fname="' . strtolower(parseToXML($row['fname'])) . '" '; 
     echo 'town="' . parseToXML($row['town']) . '" '; 
     echo 'lat="' . $row['latitude'] . '" '; 
     echo 'lng="' . $row['longitude'] . '" '; 
     echo 'id="' . $row['store_id'] . '" '; 
     echo 'isSurg="' . $row['isLaserSurgery'] . '" '; 
     echo 'isCons="' . $row['isLaserConsult'] . '" '; 
     echo 'address="' . parsetoXml($address). '" '; 
     echo 'address1="' . parsetoXml($row['address1']). '" '; 
     echo 'address2="' . parsetoXml($row['address2']). '" '; 
     echo 'address3="' . parsetoXml($row['address3']). '" '; 
     echo 'postcode="' . $row['postcode'] . '" '; 
     echo 'storenumber="' . $row['storenumber'] . '" '; 
     echo '/>'; 
    } 
} 
// End XML file 
echo '</markers>'; 


// make sure the data is xml friendly 
function parseToXML($htmlStr) 
{ 
    $xmlStr=str_replace('<','&lt;',$htmlStr); 
    $xmlStr=str_replace('>','&gt;',$xmlStr); 
    $xmlStr=str_replace('"','&quot;',$xmlStr); 
    //$xmlStr=str_replace("'",'&#39;',$xmlStr); 
    $xmlStr=str_replace("&",'&amp;',$xmlStr); 
    return $xmlStr; 
} 

// calculate the distance in miles or kms between any two points 
function distance($lat1, $lon1, $lat2, $lon2, $unit = '') { 
    $theta = $lon1 - $lon2; 
    $dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta)); 
    $dist = acos($dist); 
    $dist = rad2deg($dist); 
    $miles = $dist * 60 * 1.1515; 
    if($unit != '') 
    { 
     $unit = strtoupper($unit); 
    } 

if ($unit == "K") { 
    return ($miles * 1.609344); 
} else if ($unit == "N") { 
    return ($miles * 0.8684); 
} else { 
    return $miles; 
    } 
} 

function VerifyInput ($input, $forceInt = false) { 

if (is_numeric($input)) { 
    return $input; 
} elseif (!$forceInt) { 

    if (get_magic_quotes_gpc() && trim(ini_get("magic_quotes_sybase")) == "") { 
     $input = stripslashes($input); 
     $input = str_replace("'", "", $input); 
     $input = str_replace("`", "", $input); 
    } elseif (!get_magic_quotes_gpc()) { 
     $input = str_replace("'", "", $input); 
     $input = str_replace("`", "", $input); 
    } 
    return $input; 
} elseif ($forceInt) { 
    return 0; 
} 
} 

?> 

Przepraszamy, to dużo wklejenia tam, ale pomyślałem, że lepiej, aby to wszystko, zamiast kogoś ryzyka nie będąc w stanie odpowiedzieć, ponieważ nie było wystarczająco dużo szczegółów.

UPDATE

Próbowałem wkładając ten kawałek kodu do funkcji searchLocations ale nie wydaje tochange zachowania w każdym razie:

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); 
    /////////////// new code 
    var myOptions = { 
    zoom: 11, 
    center: address.geometry.location, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
    map = new google.maps.Map(document.getElementById("map"), myOptions); 
    //////////////// 

    } else { 
    alert(address + ' not found'); 
    } 
}); 
} 

Answer 1

Ponieważ powiedziałeś, że to będzie używane jako aplikacja na Facebooku, mam przyjazną sugestię.

Teraz twój kod działa, powinieneś zajrzeć do zawijania go w jego własnym obszarze nazw i wdrożyć module pattern. Takie działanie zagwarantuje, że twoje nazwy funkcji, szczególnie load(), nie będą kolidować ani być nadpisywane przez inne aplikacje na tej samej stronie FB.

Stworzyłem mały sample app here. Twoja może być tak prosta, jak:

if (!window.Carlin) { window.Carling = {}; } 
Carlin.Locator = function() { 

    var map,markers,infoWindow,locationSelect; 

    markers = []; 

    function load() { 
    } 

    function searchLocations() { 
    } 

    function clearLocations() { 
    } 

    //...etc 

    return { 
     init: load 
    } 
}(); 

$(document).ready(Carlin.Locator.init); 

Answer 2

Znaleziony metody szukałem w dokumentacja (niespodzianka, niespodzianka!)

Po prostu dodaj te dwie linie pod numerem map.fitBounds(bounds); w funkcji searchLocationsNear:

map.setZoom(11); 
    map.setCenter(center);