Thema:	formulardaten in map-koordinaten umwandeln
kiwi Neu hier Beiträge: 3 verfasst: 10.Okt 2006 - 20:02	hallo, ich bin heut zum ersten mal auf google-maps gestoßen, zumindest wenns ums einbinden der karten in eine website geht. bis jetzt hab ich mich auch schon soweit durchgeschlagen, dass ich festgelegte marker auf der karte zeigen kann. die befinden sich auch als link neben der karte. jetzt will ich aber noch folgendes realisieren und da hörte mein verständnis auf: es soll möglich sein, land, stadt, straße und plz in ein suchfeld einzugeben, dass dann, wenn man auf "marke berechnen" klickt, dieser punkt (die koordinaten müssen also berechnet werden) in der karte angezeigt wird. in dem sich öffnenden fester sollte dann die adresse stehen, die man eben eingegeben hat. mir ist es bereits gelungen ein suchfeld zu basteln, in das man alle angaben (straße, plz, ort, land) eingeben muss. die koordinaten wurden auch berechnet und der ort richtig in der map angezeigt. aber so müsste man davon ausgehen, dass jeder bei der angabe die reihenfolge beachtet. wenn man aber schon das land vergisst, klappts nicht mehr. also wollte ich alle angaben einzelnd eingeben, um eben solche fehler und irritationen zu vermeiden. habt ihr eine ahnung, wie ich das machen kann? bin auch nich so fit in javascript und hab daher vielleicht noch kleine denkhürden drin! für jegliche anregungen wäre ich sehr dankbar :)
fritze Immer hier Beiträge: 76 verfasst: 10.Okt 2006 - 22:27	mhmm, warum zeigst du uns nicht die seite, die du schon hast. so muss man selber immer ganz von vorne beginnen :-(
fritze Immer hier Beiträge: 76 verfasst: 10.Okt 2006 - 23:57	probier mal das aus. meinst du sowas? [url]http://www.additiv.net/googlemaps/20061010/[/url]
kiwi Neu hier Beiträge: 3 verfasst: 11.Okt 2006 - 10:19	ja, genau das wollte ich. nur war meine idee schon zu komplex - das was ich hab machts auch. trotzdem danke für dein bemühen. werd mir das ma in ruhe anschauen!
maffy Immer hier Beiträge: 57 verfasst: 11.Okt 2006 - 11:24	Und wie binde ich die Abfrage für das Formular in die eigene Google Map ein? Damit er die Adresse sucht und in der eigenen Google Map anzeigt. Mfg Maffy editiert von: maffy, 10.10.2006, 22:25 Uhr -- leben und leben lassen
fritze Immer hier Beiträge: 76 verfasst: 11.Okt 2006 - 12:18	@kiwi wäre schön, wenn du deine lösung zeigen würdest. dann hätten alle was davon ;-) @maffay eigentlich nicht schwierig... [url]http://www.additiv.net/googlemaps/20061011/[/url]
kiwi Neu hier Beiträge: 3 verfasst: 11.Okt 2006 - 13:46	ich bin mit dieser lösung zufrieden. hab noch paar icons eingebaut und das einzelne suchfeld halt belassen: is leider noch nich online...aber hier der code [code] <body onunload="GUnload()"> <table border=0>

Geben Sie hier Ihre gesuchte Adresse ein:
<input type="text" name="q" value="" class="address_input" size="40" /><input name="country" type="hidden" value="Deutschland" />
<input type="submit" name="find" value="Suche" />

</form>

//<![CDATA[

//koordinaten bei www.multimap.com, adresse eingeben und LAT und LON koordinaten in Klammern übernehmen
//api-key für url bei google anfordern - konto eroeffnen, url eingeben und key generieren
// unter google.de/apis/maps/signup.html
//key im script-tag unter dem title-tag bei key=... eintragen, alter key nur zum testen

if (GBrowserIsCompatible()) {

// variable, die html-elemente für rechtes menü sammelt
var side_bar_html = "";

// array, dass marker und html-inhalte fürs menü enthaelt
var gmarkers = [];
var htmls = [];
var i = 0;

//icons
var baseIcon = new GIcon();
baseIcon.iconSize=new GSize(32,32);
baseIcon.shadowSize=new GSize(56,32);
baseIcon.iconAnchor=new GPoint(16,32);
baseIcon.infoWindowAnchor=new GPoint(16,0);

var home = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal3/icon48.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon48s.png");
var eat = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal2/icon32.png", null, "http://maps.google.com/mapfiles/kml/pal2/icon32s.png");
var cash = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal2/icon50.png", null, "http://maps.google.com/mapfiles/kml/pal2/icon50s.png");
var sleep = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal2/icon20.png", null, "http://maps.google.com/mapfiles/kml/pal2/icon20s.png");
var shop = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal3/icon18.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon18s.png");

// funktion zum erzeugen von markern und info-fenstern
function createMarker(point,name,html,icon) {
var marker = new GMarker(point,icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// speichert info für menu
gmarkers[i] = marker;
htmls[i] = html;
// fügt link zum menu hinzu
side_bar_html += '' + name + '
';
i++;
return marker;
}

// funktion sammelt klicks und oeffnet entsprechendes info fenster
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}

// erzeugt map
var map = new GMap2(document.getElementById("map"));
// legt koordinaten, zoom und typ der karte fest
map.setCenter(new GLatLng(50.7040,12.7740), 14);

// einschraenkung für zoom-level
// map-typen
var mt = map.getMapTypes();
// ueberschreibt getMinimumResolution() und getMaximumResolution()-methode mit min. und max. zoom
for (var i=0; i<mt.length; i++) {
mt[i].getMinimumResolution = function() {return 11;}
mt[i].getMaximumResolution = function() {return 18;}
}

//anfang adress-suche
//definiert geocoder
var geocoder;
geocoder = new GClientGeocoder();

// addAddressToMap()-funktion wird aufgerufen, wenn geocoder koordinaten gefunden hat
// fuegt neuen marker zur map hinzu und oeffnet neues info-fenster
function addAddressToMap(response) {
if (!response || response.Status.code != 200) {
alert("Die eingegebene Adresse konnte nicht gefunden werden.");
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1],
place.Point.coordinates[0]);
mark = new GMarker(point);
map.addOverlay(mark);
mark.openInfoWindowHtml(place.address);
}
}

// showLocation()-funktion wird aufgerufen, wenn suche-button gedrueckt wurde
// bestimmt koordinaten der adresse im suchfeld
// fuegt marker an dieser stelle hinzu
function showLocation() {
var address = document.forms[0].q.value + " " + document.forms[0].country.value;
geocoder.getLocations(address, addAddressToMap);
}

// findLocation()-funktion wird verwendet, um beispieladressen einzutragen
function findLocation(address) {
document.forms[0].q.value = address;
showLocation();
}
//ende adress-suche

// tool, mit dem ein- und ausgezoomt werden kann
map.addControl(new GLargeMapControl());

// tool, mit dem man ziwschen den 3 verschiedenen ansichten wechseln kann
map.addControl(new GMapTypeControl());

//legt koordinaten, zoom und typ der karte fest
map.setCenter(new GLatLng(50.7120,12.7760),14,G_HYBRID_MAP);

// 4 marker, denen werden koordinaten zugeordnet sowie die inhalte der info-fenster

var point = new GLatLng(50.7086,12.7775);
var marker = createMarker(point,"Sparkasse",'Sparkasse Erzgebirge', cash)
map.addOverlay(marker);

var point = new GLatLng(50.7063,12.7768);
var marker = createMarker(point,"Gaststätte",'Gaststätte Poseidon', eat)
map.addOverlay(marker);

var point = new GLatLng(50.7059,12.7744);
var marker = createMarker(point,"md-v",'Mediendesign Vogel
Zwickauer Straße 19', home)
map.addOverlay(marker);

var point = new GLatLng(50.7111,12.782);
var marker = createMarker(point,"Pension",'Pension "Zur guten Quelle"', sleep)
map.addOverlay(marker);

var point = new GLatLng(50.7145,12.784);
var marker = createMarker(point,"LIDL",'LIDL Filiale
Chemnitzer Straße', shop)
map.addOverlay(marker);

// fuegt zusammengesetzte html-inhalte ins menu-div
document.getElementById("side_bar").innerHTML = side_bar_html;

// kleines ueberblick-fenster
map.addControl(new GOverviewMapControl(new GSize(150,150)));

// funktion zum justerien der position des fensters
function positionOverview(x,y) {
var omap=document.getElementById("map_overview");
omap.style.left = x+"px";
omap.style.top = y+"px";

// == restyling ==
omap.firstChild.style.border = "1px solid gray";

omap.firstChild.firstChild.style.left="4px";
omap.firstChild.firstChild.style.top="4px";
omap.firstChild.firstChild.style.width="190px";
omap.firstChild.firstChild.style.height="190px";

}

}

// warnung, wenn browser nicht kompatibel ist
else {
alert("Sorry, Google Maps API ist nicht kompatibel mit Ihrem Browser");
}

// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://www.econym.demon.co.uk/googlemaps/

//]]>

</body>
</html>
[/code]

editiert von: kiwi, 11.10.2006, 01:29 Uhr