Google Maps API v3 - Einfache, aber hinzufügen Geocode Adresse von php/mysql
Habe ich dieses einfache "hello world" - version von google Maps javascript-api v3 und es funktioniert für eine statische geocode. Meine Daten sind normal-Adressen (z.B. "30 rockefeller center, New York, New York").
Diese Daten genannt wird, aus mit php aus einer mysql-Datenbank. Ich kann die Adresse auf der Seite, mit etwas wie diesem...Für den Zweck von diesem post sagen, das würde alle info: address, city, state, zip code
<?php echo $row_query_details['address'];?>
So, ich muss geocode diese info für die Karte. Ich fühle mich sehr wohl mit mysql und php, aber nicht so viel mit javascript. Ich habe trial/error und Erforschung dieser für ein paar Tage.
Ich habe überall gesucht für ein funktionsfähiges Muster oder Beispiel und fühlen, wie dieses relativ einfache problem gewesen sein müssen gestellt und beantwortet viele Male, aber ich kann nicht es herausfinden!
Vielen Dank im Voraus.
Hier ist der code mit dem ich arbeite:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
title:"Hello World!"
});
//To add the marker to the map, call setMap();
marker.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:500px"></div>
</body>
</html>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hallo und happy Jahrestag (in Bezug auf deine Frage und tutorial).
Ich bin ein web-Entwickler und muss dir danken. Ich habe dieses tutorial verwendet, da ich derzeit keinen Weg, um geocode über submit (lat/long muss gezogen werden von der gespeicherten Adresse in der db), wie ich bin-Beratung, eine bestehende Website und haben nur wenig Zugang zu backend-code.
Ihre Frage zu beantworten in Bezug auf marker, die Interaktivität, das dauert ein paar einfache Schritte:
1) content Liefern. Dies geschieht vor dem erklären der geocoder (var geocoder;):
2) Unterhalb der marker-Deklaration ( var marker = new google.maps.Marker({ ), müssen Sie erklären, Infofenster und fügen Sie den Ereignis-listener:
Edit:
Habe ich erfolgreich gezogen array-Informationen aus einer MySQL-Datenbank durch den ausbau auf Ihre Methode. Meine Methode ist hier:
1) Grundlegende php-unten:
2) einrichten des google maps API:
3) Geocodierung setup unter:
Nochmals vielen Dank für dieses posting. Es war sehr hilfreich.
Können Sie Ihre PHP-variable in JavaScript übergeben, php Variablen in Funktion initialize().
Ihre body-tag wird wie folgt Aussehen;
Ex:
<body onload="initialize('<?php echo $row_query_details['address'];?>')">
Dann verwenden Sie dieser bestimmten Variablen im javascript-code, Ihre javascript-Funktion wie folgt Aussehen:
Jetzt können Sie diese
G_address
JavaScript Variablen dynamisch in Ihre G-KARTE code.Dieser wird Ihnen hilfreich sein..
So, ich werde die Antwort auf meine eigene Frage hier. Die erste Antwort war ich nicht in der Lage, utlize. Ich bin mir nicht sicher, ob die Antwort unvollständig war oder ich gerade nicht zu Folgen, es. Egal, hier ist, was der code sieht wie folgt aus:
Zuerst hatte ich meine Adresse, die Komponenten ziehen von der mysql-db, und ich wies Ihnen Variablen wie diese:
Dann, meine google-v3-Zeug sieht wie folgt aus:
Und diese Art von Antworten meine Frage. Es gibt ein paar Themen, die ich noch lösen muss, wie z.B. (a) wie stellen Sie die Markierung anklickbar, und interaktiv sind, und (b) der anzeigen blinkt eine der geocode erstmals definiert (34.05,-118.24) vor dem anzeigen der richtigen Adresse.
Diese beiden Probleme muss ich noch beheben, aber zumindest die Geocodierung erfolgreich arbeitet. Hoffe, dies hilft jemand anderes.
Dank!