Webentwicklung - Extras / Erweiterungen
Karten einbinden - Google Maps
Mit Google Maps können Sie eine beliebige Karte in Ihre Website einzubinden. Ideal als Wegbeschreibung auf einer Kontaktseite geeignet! Mit einem Klick auf die Karte können Ihre Nutzer das volle Angebot von Google Maps nutzen, inklusive der Navigationsfunktion!
Google Maps: So geht`s ...
- Öffnen Sie einen neuen Tab in Ihrem Browser und navigieren Sie zu Google Maps
- Lassen Sie sich den gewünschten Ort über die Suchfunktion anzeigen
- Öffnen Sie das Dropdownmenü (oben links)
- Wählen Sie die Option: Karte teilen oder einbetten
- Wählen Sie im folgenden Fenster den Reiter: Karte einbetten
- Bestimmen Sie die größe der Karte
- Kopieren Sie den Code
Die Website: HTML5
Fügen Sie den kopierten Code in Ihre Website ein.
<div class="maps"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.564878323724!2d10.569280615715675!3d52.26944606251983!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47aff5ad7df109c9%3A0xdaf694fb7cf8a5c5!2sWiendruwestra%C3%9Fe%2C+38104+Braunschweig!5e0!3m2!1sde!2sde!4v1500885690347" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </div>
Die Website: CSS
Sie können die Position und das Layout der Karte mit CSS anpassen!
div.maps {
width: 600px;
height: 320px;
margin: 1em auto 1em auto;
padding: auto;
padding-top: 20px;
padding-button: 20px;
text-align: center;
background-color: #3D3C3A;
}
