nicht angemeldet
Google Map
suitHallo,
auf http://www.gothic-singles.de/gesamtkarte.htm habe ich eine Tolle Userkarte gefunden. Ich frage mich, wie machen die das? Hat da jemand von euch Erfahrung? Ich würde das gerne bei mir auch machen. Hab eine User Tabelle mit folgenden Felder:
Name
Vorname
Straße
PLZ
Ort
kann ich denn mit diesen Daten dieses http://www.gothic-singles.de/gesamtkarte.htm umsetzten?
Gruß,
Micha
-
Ich frage mich, wie machen die das?
Mit der Google Maps API einfach 2 Marker verschiedene Markericons (Aufrund des Geschlechts) auf verschiedene Positionen setzen (Aufgrund der Adresse).
-
Hallo,
danke für deine Antwort, ich habe bis jetzt folgendes:
error_reporting(E_ALL); $host = "localhost"; // Adresse des Datenbankservers, meistens localhost $user = "xxx"; // Ihr MySQL Benutzername $pass = "xxxx"; // Ihr MySQL Passwort $db = "xxxx"; // Name der Datenbank $link = mysql_connect($host, $user, $pass) or die ("Keine Verbindung zu der Datenbank möglich."); mysql_select_db($db, $link); $abfrage = "SELECT name, vorname, strasse, plz, ort FROM user"; $ergebnis = mysql_query($abfrage);<span class="Stil81"> <?php while($row = mysql_fetch_object($ergebnis)) { ?> </span><br /> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr class="Stil8"> <td width="21%" ><span class="Stil81"><?php print $row->name; ?></span></td> <td width="30%" ><span class="Stil81"><?php print $row->vorname; ?></span></td> <td width="41%" ><span class="Stil81"><?php print $row->plz; ?> <?php print $row->ort; ?></span></td> </tr> </table> <span class="Stil81"> <?php } ?> </span>So mit diesem Code lese ich die Daten aus meiner Datenbank aus und lass die auf meiner WebSeite anzeigen schön untereinander. Jetzt kommt der Link ins Spiel, den du mir genannt hast, ich habe das jetzt mal so eingebaut:
<script src="http://maps.google.com/maps?file=api&v=2.x&key=xxxxxxx" type="text/javascript"></script> <script type="text/javascript"> var map = null; var geocoder = null; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); geocoder = new GClientGeocoder(); } } function showAddress(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } } </script> </head> <body onload="initialize()" onunload="GUnload()"> <form action="#" onsubmit="showAddress(this.address.value); return false"> <p> <input type="text" size="60" name="address" value="1600 Amphitheatre Pky, Mountain View, CA" /> <input type="submit" value="Go!" /> </p> <div id="map_canvas" style="width: 500px; height: 300px"></div> </form>klar dass das noch nicht gehen kann, denn da müssen ja das iput Zeug bestimmt raus und ich muss meine Daten von oben dort rein setzten. Aber ich komme einfach nicht druaf, wie ich die Daten von oben mit dem unteren verbinden kann. Ich denke das muss alles in die Schleife usw... kannst du mir denn da weiterhelfen?
Gruß,
Micha-
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}Das ist die eigentlich für das einzeigen des Markers (und zum hinspringen dorthin) verantwortliche Funktion.
klar dass das noch nicht gehen kann, denn da müssen ja das iput Zeug bestimmt raus und ich muss meine Daten von oben dort rein setzten. Aber ich komme einfach nicht druaf, wie ich die Daten von oben mit dem unteren verbinden kann. Ich denke das muss alles in die Schleife usw... kannst du mir denn da weiterhelfen?
Was du machen musst ist einfach eine in einer Schleife JavaScript-Zeilen ausgeben:
<script type="text/javascript">
showAddress('salzburg, vogelweiderstraße');
showAddress('wien, schottenring');
showAddress('linz, neue heimat');
</script>natürlich solltest du die Funktion eher "setMarker" oder ähnliches nennen und entsprechend abwandeln, dass sie nur noch einen Marker erzeugt und nicht das zentrum der Karte manipuliert - das Info-Fenster kannst du dir ggf auch schenken.
Btw: ggf. solltest du in deiner Schleife der Datenbankausgabe nur tr-Elemente erzeugen und nicht komplette Tabellen - ist ggf. sinnvoller, du willst ja nur _eine_ Tabelle.
-
Hallo,
vielen dank für deine Antwort, ich habe das jetzt mal so gemacht:
error_reporting(E_ALL); $host = "localhost"; // Adresse des Datenbankservers, meistens localhost $user = "xxx"; // Ihr MySQL Benutzername $pass = "xxx"; // Ihr MySQL Passwort $db = "xxxxxx"; // Name der Datenbank $link = mysql_connect($host, $user, $pass) or die ("Keine Verbindung zu der Datenbank möglich."); mysql_select_db($db, $link); $abfrage = "SELECT name, vorname, strasse, plz, ort FROM user"; $ergebnis = mysql_query($abfrage); $abfrage1 = "SELECT name, vorname, strasse, plz, ort FROM user"; $ergebnis1 = mysql_query($abfrage1);<script src="http://maps.google.com/maps?file=api&v=2.x&key=xxxxx" type="text/javascript"></script> <script type="text/javascript"> var map = null; var geocoder = null; function initialize() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); geocoder = new GClientGeocoder(); } } </script> <script type="text/javascript"> <?php while($row = mysql_fetch_object($ergebnis1)) { ?> showAddress('<?php print $row->name; ?> <?php print $row->vorname; ?>, <?php print $row->strasse; ?>, <?php print $row->plz; ?> <?php print $row->ort; ?>'); <?php } ?> </script>in showAddress sind nun auch die richtigen Daten schon mal drin. Also wenn ich das bei mir Local aufrufe.
<body onLoad="initialize()" onUnload="GUnload()"> <p> </p> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body>unten habe ich das dann aber leider wird auf der Karte nichts ausgegeben und das mit dem onLoad wenn ich das weg nehme, dann wird die Karte auch nicht mehr angezeigt, da stimmt wohl noch was nicht, aber ich kenne mich mit dem JS leider zu wenig aus :-( ich hoffe mal, dass du mir nochmals helfen kannst.
Gruß,
Micha-
in showAddress sind nun auch die richtigen Daten schon mal drin. Also wenn ich das bei mir Local aufrufe.
Der Name ist für Google Maps nicht relevant, den kannst du streichen
<body onLoad="initialize()" onUnload="GUnload()">
<p>
</p>
<div id="map_canvas" style="width: 500px; height: 300px"></div></body>
> unten habe ich das dann aber leider wird auf der Karte nichts ausgegeben und das mit dem onLoad wenn ich das weg nehme, dann wird die Karte auch nicht mehr angezeigt, da stimmt wohl noch was nicht, aber ich kenne mich mit dem JS leider zu wenig aus :-( ich hoffe mal, dass du mir nochmals helfen kannst. Aktuell führst du "showAddress" mehrfach im head deines HTML-Dokuments aus, danach wird über onload im body-Element die Google-Karte aufgerufen. Du musst dafür sorgen, dass die Google-Karte aufgerufen wird und dann erst der reihe nach deine Funktionen. Am einfachsten ist es, wenn du die Aufrufe von showAddress in einer weiteren Funktion gruppierst und diese dann am Ende der initialize-Funktion aufrufst.-
Hallo,
danke für die Hilfe. Gibts dafür denn ein Beispiel denn wenn ich ehrlich bin, dann verstehe ich nur Bahnhof :-(
Gruß,
Micha-
Hallo,
hab es nun soweit:
<?php error_reporting(E_ALL); $host = "localhost"; // Adresse des Datenbankservers, meistens localhost $user = "xxx"; // Ihr MySQL Benutzername $pass = "xx"; // Ihr MySQL Passwort $db = "xxxxx"; // Name der Datenbank $link = mysql_connect($host, $user, $pass) or die ("Keine Verbindung zu der Datenbank möglich."); mysql_select_db($db, $link); $abfrage1 = "SELECT name, vorname, strasse, plz, ort FROM user"; $ergebnis1 = mysql_query($abfrage1); $Key = 'xxxxxx'; ?> <script src="http://maps.google.com/maps?file=api&v=2&key=<?php print $Key; ?>" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("googlemape")); geocoder = new GClientGeocoder(); map.setCenter(new GLatLng(50.936796,6.946106), 13); <?php while($row = mysql_fetch_object($ergebnis1)) { ?> showAddress('<?php print $row->name; ?> <?php print $row->vorname; ?>, <?php print $row->strasse; ?>, <?php print $row->plz; ?> <?php print $row->ort; ?>'); <?php } ?> } } function showAddress(address) { if (geocoder) { geocoder.getLatLng( address ,function(point) { if (!point) { console.log(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); // marker.openInfoWindowHtml(address); } } ); } } window.addEvent('domready', load); window.addEvent('unload', GUnload); //]]> </script> <div style="width: 605px; height: 360px; overflow: hidden;"> <div id="googlemape" style="width: 605px; height: 360px;"></div> </div>aber leider wird mir die Karte nun nicht mehr angezeigt :-( was mache ich denn jetzt falsch?
Gruß,
Micha-
Hallo,
hier nochmals das was ich habe und auch geht:
<?php error_reporting(E_ALL); $host = "localhost"; // Adresse des Datenbankservers, meistens localhost $user = "xxx"; // Ihr MySQL Benutzername $pass = "xx"; // Ihr MySQL Passwort $db = "xxxxx"; // Name der Datenbank $link = mysql_connect($host, $user, $pass) or die ("Keine Verbindung zu der Datenbank möglich."); mysql_select_db($db, $link); $abfrage1 = "SELECT name, vorname, strasse, plz, ort FROM user"; $ergebnis1 = mysql_query($abfrage1); $Key = 'xxxxxx'; ?> <script src="http://maps.google.com/maps?file=api&v=2&key=<?php print $Key; ?>" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("googlemape")); geocoder = new GClientGeocoder(); map.setCenter(new GLatLng(50.936796,6.946106), 13); <?php while($row = mysql_fetch_object($ergebnis1)) { ?> showAddress('<?php print $row->name; ?> <?php print $row->vorname; ?>, <?php print $row->strasse; ?>, <?php print $row->plz; ?> <?php print $row->ort; ?>'); <?php } ?> } } function showAddress(address) { if (geocoder) { geocoder.getLatLng( address ,function(point) { if (!point) { console.log(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); // marker.openInfoWindowHtml(address); } } ); } } window.addEvent('domready', load); window.addEvent('unload', GUnload); //]]> </script> <div style="width: 605px; height: 360px; overflow: hidden;"> <div id="googlemape" style="width: 605px; height: 360px;"></div> </div>hab nur noch eine kleine Frage, wie kann ich das machen, dass ich die Maker auch verlinken kann auf das Profil die rufe ich so auf: /user/detail?id=1
Wäre nett, wenn mir da noch jemand helfen kann.
Gruß,
Micha-
hab nur noch eine kleine Frage, wie kann ich das machen, dass ich die Maker auch verlinken kann auf das Profil die rufe ich so auf: /user/detail?id=1
Die Beispielseiten der Google-Maps-API solltest du dir schon mal ansehen ;) um zu sehen was damit alles möglich ist (kurzum: praktisch "alles")
Ich würde dafür das bind-Event nehmen - das Beispiel zeigt das Event aber nicht auf einen marker/icon sondern auf die gesamte Karte.
Ich empfehle dir dich auch grundlegend mit JavaScript auseinanderzusetzen und deinen Code ordentlich und lesbar zu strukturieren bevor du weitermachst - vor allem die Benennung der Funktionen solltest du überdenken, sonst blickst du bei zunehmender Komplexität nicht mehr durch - spätestens aber in 3 Wochen weißt du nicht mehr, was du da selbst programmiert hast :)
-
-
-
-
-
-
-
-