L'API Google Maps v3: Comment Définir le Niveau de Zoom Et la Carte Centre envoyés par l'Utilisateur de l'Emplacement?

J'ai utilisé ce tutoriel de Google pour construire une application web qui trouve le magasin le plus proche de l'utilisateur a entré emplacement:

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

J'ai mon appli presque le même chemin que je veux, au moment du chargement de la page, la carte est chargée, centré et de définir le niveau de zoom 6 et l'utilisateur remplit le formulaire avec leur emplacement.

L'application tire alors tous les magasin d'infos à partir de la db et de remplir la carte avec un marqueur pour chaque.

Le niveau de zoom semble diminuer aswell mais je ne trouve pas cela dans le code n'importe où.

Ce que je veux faire sur "soumettre" est le zoom niveau de zoom 6 et le centre de la carte pour la latitude et la longitude de l'utilisateur a entré l'emplacement et la sortie d'infos sur le plus proche des magasins, de l'e.g le plus proche 5. Je me demandais si quelqu'un ici savait comment implémenter cette fonctionnalité?

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

Excuses, c'est beaucoup de collage de là, mais j'ai jugé préférable d'inclure tout plutôt que de prendre le risque que quelqu'un ne pas être en mesure de répondre, car il n'y avait pas suffisamment de détails.

Mise à JOUR

J'ai essayé d'insérer ce bout de code dans le searchLocations fonction, mais il ne semble pas tochange le comportement de toute façon:

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');
}
});
}
Avez-vous un travail de démonstration de n'importe où?
ce sera effectivement à un facebook onglet, mais la source de l'iframe peut être trouvé ici: tiny.cc/6gto0

OriginalL'auteur martincarlin87 | 2011-12-21