• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Google maps positioieren

strohhirn

Neues Mitglied
Hallo,
ich bin neu hier auf dem forum und das ist mein erster Beitrag. html und CSS hab ich auch erst seit ein paar tagen kennen gelernt.

Ich arbeite gerade an einer kleinen online visitenkarte für die firma meines vaters.
Unter Kontakt wollte ich lrechts neben den standard kontaktangaben eine kleine Google Maps karte platzionieren mit dem standort der firma.

Aber wie verschiebe ich diese kartei dorthin?(befindet sich in div-box)
Und ist das überhaupt erlaubt für solche zwecke eine Karte einzubinden?

Hier der Quelltext:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>    <title>Reparaturservice Schwerin</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">    <meta name="description" content="Wir reparieren Haushaltsger&auml;te und verkaufen gebrauchte.">    <meta name="author" content="Nikita Sevostyanov">    <meta name="keywords" content="Haushaltsger&auml;te">    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
    <link href="style.css" type="text/css" rel="stylesheet"></head>
<body><div id="hauptteil"><h2>Start</h2><p>Herzlich Wilkommen auf meiner Seite!</p><hr><h2>Reparatur</h2><p>Wir reparieren hauptsachlich Waschmaschinen aller Marken aber auch andere Haushaltsger&auml;te, wie Trockner,Geschirschp&uuml;ler usw.</p><hr><h2>Verkauf</h2><p>Wir verkaufen auch gebrauchte Haushaltsger&auml;te.</p><hr><h2>Kontakt</h2><p><b>Reparaturservice Schwerin</b><br>Baustra&szlig;e 7<br>19061 Schwerin<br><br>Telefon: (0385) 395 76 95<br>Mobil:    0151 50 33 33 52<br>E-Mail:  <a href="mailto:[email protected]">[email protected]</a><br>Internet: <a href="http://www.reparaturservice-schwerin.de/">www.reparaturservice-schwerin.de</a><br><br>&Ouml;ffnungsteiten:<br>Montag bis Samstag: 10:00-17:00 Uhr</p><div id="maps"><iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.de/maps/ms?msa=0&amp;msid=203370694728852923017.0004e218244ebcbd273c6&amp;hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.608192,11.382523&amp;spn=0.017823,0.036478&amp;z=14&amp;output=embed"></iframe><br /><small><a href="https://maps.google.de/maps/ms?msa=0&amp;msid=203370694728852923017.0004e218244ebcbd273c6&amp;hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.608192,11.382523&amp;spn=0.017823,0.036478&amp;z=14&amp;source=embed" style="color:#0000FF;text-align:left">Reparaturservice Schwerin</a> auf einer gr&ouml;&szlig;eren Karte anzeigen</small></div></div>
</body></html>

Und hier die CSS datei:
Code:
body {     background-color: #16A6DF;
 }
 #hauptteil{
     background-color:#FFFFFF;
     padding:10px 40px;
     margin: 0px 400px;
 }
 #maps{
     position: relative;
     float: right;
 }

Mfg strohhirn
 
Zuletzt bearbeitet:
Werbung:
Ok ich denke ich darf google bei mir einbinden.
Ich kann komischer weise nichts hochladen. Bei mir funktioniert das Anhänge verwalten fenster nicht.

Hier der Quelltext:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>    <title>Reparaturservice Schwerin</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">    <meta name="description" content="Wir reparieren Haushaltsger&auml;te und verkaufen gebrauchte.">    <meta name="author" content="Nikita Sevostyanov">    <meta name="keywords" content="Haushaltsger&auml;te">    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
    <link href="style.css" type="text/css" rel="stylesheet"></head>
<body><div id="hauptteil"><h2>Start</h2><p>Herzlich Wilkommen auf meiner Seite!</p><hr><h2>Reparatur</h2><p>Wir reparieren hauptsachlich Waschmaschinen aller Marken aber auch andere Haushaltsger&auml;te, wie Trockner,Geschirschp&uuml;ler usw.</p><hr><h2>Verkauf</h2><p>Wir verkaufen auch gebrauchte Haushaltsger&auml;te.</p><hr><h2>Kontakt</h2><p><b>Reparaturservice Schwerin</b><br>Baustra&szlig;e 7<br>19061 Schwerin<br><br>Telefon: (0385) 395 76 95<br>Mobil:    0151 50 33 33 52<br>E-Mail:  <a href="mailto:[email protected]">[email protected]</a><br>Internet: <a href="http://www.reparaturservice-schwerin.de/">www.reparaturservice-schwerin.de</a><br><br>&Ouml;ffnungsteiten:<br>Montag bis Samstag: 10:00-17:00 Uhr</p><div id="maps"><iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.de/maps/ms?msa=0&amp;msid=203370694728852923017.0004e218244ebcbd273c6&amp;hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.608192,11.382523&amp;spn=0.017823,0.036478&amp;z=14&amp;output=embed"></iframe><br /><small><a href="https://maps.google.de/maps/ms?msa=0&amp;msid=203370694728852923017.0004e218244ebcbd273c6&amp;hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.608192,11.382523&amp;spn=0.017823,0.036478&amp;z=14&amp;source=embed" style="color:#0000FF;text-align:left">Reparaturservice Schwerin</a> auf einer gr&ouml;&szlig;eren Karte anzeigen</small></div></div>
</body></html>

und hier die CSS datei:
Code:
 body {     background-color: #16A6DF;
 }
 #hauptteil{
     background-color:#FFFFFF;
     padding:10px 40px;
     margin: 0px 400px;
 }
 #maps{
     position: relative;
     float: right;
 }

Gruß
strohhirn
 
Werbung:
OK ich denke mal ich darf google verwenden.
Bei mir funktioniert das Anhänge verwalten fenster nicht, deswegen gebe ich euch mal den Quelltext:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>    <title>Reparaturservice Schwerin</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">    <meta name="description" content="Wir reparieren Haushaltsger&auml;te und verkaufen gebrauchte.">    <meta name="author" content="Nikita Sevostyanov">    <meta name="keywords" content="Haushaltsger&auml;te">    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
    <link href="style.css" type="text/css" rel="stylesheet"></head>
<body><div id="hauptteil"><h2>Start</h2><p>Herzlich Wilkommen auf meiner Seite!</p><hr><h2>Reparatur</h2><p>Wir reparieren hauptsachlich Waschmaschinen aller Marken aber auch andere Haushaltsger&auml;te, wie Trockner,Geschirschp&uuml;ler usw.</p><hr><h2>Verkauf</h2><p>Wir verkaufen auch gebrauchte Haushaltsger&auml;te.</p><hr><h2>Kontakt</h2><p><b>Reparaturservice Schwerin</b><br>Baustra&szlig;e 7<br>19061 Schwerin<br><br>Telefon: (0385) 395 76 95<br>Mobil:****0151 50 33 33 52<br>E-Mail:**<a href="mailto:[email protected]">[email protected]</a><br>Internet: <a href="http://www.reparaturservice-schwerin.de/">www.reparaturservice-schwerin.de</a><br><br>&Ouml;ffnungsteiten:<br>Montag bis Samstag: 10:00-17:00 Uhr</p><div id="maps"><iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.de/maps/ms?msa=0&amp;msid=203370694728852923017.0004e218244ebcbd273c6&amp;hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.608192,11.382523&amp;spn=0.017823,0.036478&amp;z=14&amp;output=embed"></iframe><br /><small><a href="https://maps.google.de/maps/ms?msa=0&amp;msid=203370694728852923017.0004e218244ebcbd273c6&amp;hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.608192,11.382523&amp;spn=0.017823,0.036478&amp;z=14&amp;source=embed" style="color:#0000FF;text-align:left">Reparaturservice Schwerin</a> auf einer gr&ouml;&szlig;eren Karte anzeigen</small></div></div>
</body></html>

Und die CSS datei:
Code:
 body {     background-color: #16A6DF;
 }
 #hauptteil{
     background-color:#FFFFFF;
     padding:10px 40px;
     margin: 0px 400px;
 }
 #maps{
     position: relative;
     float: right;
 }

Gruß

strohhirn
 
Hallo,

ok,


  1. hochladen, war nicht hier gemeint sondern normal auf Server in Aktion.
  2. Karte überhaupt erlaubt? so glas klar nein.

Cheffchen
 
Sorry das ich das jetzt so oft hochgeladenhabe, wuste nicht das das ertmal bestätigtwerden muss.

Ich habe noch keinen Server.

Und warum ist das denn jetzt nicht erlaubt? Da steht doch:
Die Google Maps-API ist für jede kostenlos aufrufbare Website erhältlich. Sie können die API sowohl auf kommerziellen als auch auf Non-Profit-Websites verwenden, sofern Ihre Website den Nutzungsbedingungen entspricht.

Gruß

strohhirn
 
Werbung:
Habs jetzt doch mit float:left im dem Kontakt-teil geschaft das die map rechts neben dem text ist. :D

Aber wieso darf ich google denn jetzt nicht vewenden auf meiner seite?

Ich weiß garnicht ob ich überhaut dieses API benutze. Ich hab einfach unter "Meine Orte" eine eingene Karte ertellt und mir den link als quelltext geben lassen.

Gruß

strohhirn
 
Du hast ein iframe eingebunden. Erkennbar an diesem Code-Schnippsel:

HTML:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.de/maps/ms?msa=0&amp;msid=203370694728852923017.0004e218244ebcbd273c6&amp;hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.608192,11.382523&amp;spn=0.017823,0.036478&amp;z=14&amp;output=embed"></iframe>

Falls deine Seite eine Seite für ein Unternehmen ist, dann Du das sofort wieder entfernen, da dies den Nutzungsbedingungen von Google widerspricht (und das wird durchaus kontrolliert). In dem Fall musst Du die GoogleMaps API verwenden, mit der wäre dann auch eine Positionierung möglich, die Du ja willst.

Alles zur GoogleMap API findest Du ausführlichst dokumentiert hier:
https://developers.google.com/maps/documentation/javascript/

Moderation: Verschoben von CSS zu JavaScript, da die "Gestaltung" von GoogleMaps-Karten nur per JavaScript (GoogleMap API) möglich ist.
 
wegen "Maps-API" genau :O)

habe igendwie keine Mail bekommen das neuer beträge geschrieben wurden :O(.

Cheffchen
 
Werbung:
Hab es jetzt hingekriegt die Karte über API einzubinden.

Die Karte sieht gleich aus, ist es mir denn jetzt wirklich erlaubt diese zu nutzen? Und ist es schlimm wenn jeder diesen API key sehen kann in meinem Quelltext?

Und denn wollt ich noch fragen, ob es erlaubt ist über Google Map Maker meine Firma bei google maps anzeigen zu lassen oder brauche ich dafür wieder irgendwas besonderes oder ne lizenz?

Ich hole mir heute warscheinlich nen Webhost, den kann ich ja mal die seite verlinken.

mfg

strohhirn
 
Zuletzt bearbeitet:
Hallo,

die API ist immer sichtbar, der KEY funzt ja nur auf deiner Seite, deswegen ist das OK.

Klar kannst Marker erstellen, da für ist das ja da, kannst ja sogar Farbe der Karte ändern.

klick mal auf meine Sigantur und da ganz unten ist eine Feste/Statik MAP und ein Link zur einer Interaktiven, beides ist mit der API gemacht und damit erlaubt so lang das öffentlich ist.

Cheffchen
 
Werbung:
Zurück
Oben