Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Google Maps auf kommerzieller Website einbinden“

dn3d_fanboy

Aktives Mitglied

Hallo,
leider werde ich zum Thema "Google Maps auf eigener Website einbinden" nicht so richtig schlau.

Momentan binde ich die Google Maps über einen Javascript-Code ein, den ich in einem der vielen Online-Generatoren generiert habe. Darf ich das überhaupt?

Code:
HTML:
<div id="gmaps-area">
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                <div style="overflow:hidden;height:400px;width:400px;"><div id="gmap_canvas" style="height:400px;width:400px;"></div>
                <style>#gmap_canvas img{max-width:none!important;background:none!important;}</style></div>
                <script type="text/javascript"> function init_map(){var myOptions = {zoom:16,center:new google.maps.LatLng(50.77436,7.475289999999973),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(50.77436, 7.475289999999973)});infowindow = new google.maps.InfoWindow({content:"<b>Kindergarten Haus Kunterbunt</b><br/>Halfter Stra&szlig;e 41<br/>53783 Eitorf" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
        </div>

Oder wie muss ich da vorgehen. Über die Googl-eigene API? Ist das dann auch kostenlos bei kommerzellen Websites (die Map wäre natürlich frei zugänglich)?

Leider finde ich im Web teils sehr widersprüchliche und (wahrscheinlich) veraltete Aussagen. Vielleicht kann mir hier jemand den ein oder anderen Tipp geben, wie ich bei dem Thema vorgehen darf.

Besten Dank im Voraus.
 

msa1989

Bin da

Hi,

hier ist ein Code wie man eine Google Maps Karte einbinden kann:
HTML:
<div id="map-canvas" style="width:500px; height:500px;"></div>
<script type="text/javascript">
function initialize() {
    var Pos1 = new google.maps.LatLng(48.798242, 11.080871);
    var Pos2 = new google.maps.LatLng(48.780005, 11.115932);
    var msg1 = '<p>Mein Content</p>';
    var msg2 = '<p>Mein Content</p>';
    var Marker1 = 'https://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|00FFFF|000000|FF0000';
    var Marker2 = 'https://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|CDCDCD|000000|DEDEDE';
    var mapOptions = {
        zoom: 13,
    center: new google.maps.LatLng(48.789902, 11.091299)
  };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    placeMarker(Pos1, msg1, Marker1, map);
    placeMarker(Pos2, msg2, Marker2, map);
   
}

function placeMarker(LatLngPos, msg, customMarker, map) {
    var infoWindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        position: LatLngPos,
        map: map,
        icon: customMarker
    });
    google.maps.event.addListener(marker, 'click', function(event) {
        infoWindow.setContent('<div style="width:350px">' + msg + '</div>');
        infoWindow.setPosition(event.latLng);
        infoWindow.open(map);
        map.setCenter(marker.getPosition());
        map.setZoom(15);
    });
}

function loadScript() {
    var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;
</script>

lies es dir durch, schau in die Google Maps Dokumentation. Unterliegt natürlich den Beschränkungen von Google. Kopier den Code einfach mal in eine HTML-Vorlage und schau dir die Live-Version an.
 

patrick_l

Hat es drauf

Oder wie muss ich da vorgehen. Über die Googl-eigene API? Ist das dann auch kostenlos bei kommerzellen Websites (die Map wäre natürlich frei zugänglich)?
Kurz und knapp: Ja, darfst du. Jedoch würde ich keinen Generator nehmen, da diese in der Regel irgendwelche "Brandings" (Backlinks) enthalten. Auch wirkt die Karte von Google vereinzelt als Fremdkörper. Daher mit der API arbeiten, und das Kartenmaterial an das eigene Layout anpassen.

Liebe Grüße, Patrick
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.189
Beiträge
2.582.077
Mitglieder
67.259
Neuestes Mitglied
SaschMasch1312
Oben