Bonjour,
Après de multiples tentatives, je n'arrive toujours pas à obtenir l'application désirée. Je vous explique :
Ma page web contient un champ de recherche et une map Google. Lorsque que l'internaute effectue la recherche d'une ville, la carte l'affiche automatiquement (zoom, centrae, etc...)
Ce que je souhaite réaliser, c'est avoir un certain nombre de villes mémorisées dans une BDD. Lorsque l'internaute effectue sa recherche, 2 possibilités :
- soit sa ville est déjà mémorisée dans la base youpiiiii ! La bulle sur la map affichera un contenu mémorisée dans la base.
- ou sa ville n'y figure pas. La bulle lui proposera d'enregistrer sa ville (je m'en occuperai par la suite du formulaire php)
Etant débutant en PHP/SQL je cris HELP ME.
D'avance merci.
Voici ma page web pour l'instant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
[ Lien ]">
<html xmlns=" [ Lien ]" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API Example: Extraction of Geocoding Data</title>
<script src=" [ Lien ]"
type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(34, 0), 2); // '34' correspond à la position verticale de la carte
// '0' correspond à la position horizontal de la carte
// '2' correspond au zoom de la carte
geocoder = new GClientGeocoder();
map.addControl(new GLargeMapControl()); //outils de zoom sur la carte
map.addControl(new GMapTypeControl()); // outils de sélection de type de carte
map.removeMapType(G_HYBRID_MAP); // supprime la carte 'Mixte'
map.addMapType(G_PHYSICAL_MAP); // ajoute la carte 'Relief'
map.setMapType(G_PHYSICAL_MAP); // utilise la carte 'Relief' par défaut
} // fin if initialize
else {
alert("Desolé, l'API Google Maps n'est pas compatible avec votre navigateur.");
} // fin else initialize
} // fin function initialize
// -------------------------------------------------------------------------------------------------------------------------------------------- //
// addAddressToMap() is called when the geocoder returns an
// answer. It adds a marker to the map with an open info window
// showing the nicely formatted version of the address and the country code.
function addAddressToMap(response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode that address");
} // fin if addAddressToMap
else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
marker = new GMarker(point);
//map.addOverlay(marker);
var bulle = place.address;
var infoUrl = "test.html";
GEvent.addListener(marker, "click", function() {
var maxContentDiv = document.createElement('div');
maxContentDiv.innerHTML = 'Loading...'
marker.openInfoWindowHtml(bulle,
{maxContent: maxContentDiv,
maxTitle: "En savoir plus"});
var iw = map.getInfoWindow();
GEvent.addListener(iw, "maximizeclick", function() {
GDownloadUrl(infoUrl, function(data) {
maxContentDiv.innerHTML = data;
}); // fin GDownloadUrl
}); // fin GEvent.addListener
setTimeout("map.getInfoWindow().maximize()",4000); // minuterie pour l'ouverture de la grande bulle
}); // fin GEvent.addListener
map.addOverlay(marker);
GEvent.trigger(marker,"click"); // ouverture automatique de la bulle
// redimensionnement de la carte
map.setCenter(point, 6); // '6' correspond au zoom de la carte sur une ville
} // fin else addAddressToMap
} // fin function addAddressToMap
// showLocation() is called when you click on the Search button
// in the form. It geocodes the address entered into the form
// and adds a marker to the map at that location.
function showLocation() {
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}
// findLocation() is used to enter the sample addresses into the form.
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
</script>
</head>
<body onload="initialize()">
<!-- Creates a simple input box where you can enter an address
and a Search button that submits the form. //-->
<form action="#" onsubmit="showLocation(); return false;">
<p>
<b>Recherher une ville</b>
<input type="text" name="q" value="" size="40" />
<input type="submit" name="find" value="Rechercher" />
</p>
</form>
<div id="map_canvas" style="width: 100%; height: 600px"></div>
<noscript>
<b>JavaScript doit être activé pour utiliser Google Maps.</b>
Il semblerait que JavaScript soit désactivé ou non supporté par votre navigateur.
Pour visualiser les cartes Google Maps, activez JavaScript dans les options de votre navigateur et réessayez.
</noscript>
</body>
</html>