2016-06-24 21 views
0

Ich benutze Squarespace, um meine Website zu erstellen und möchte eine benutzerdefinierte Karte aus Google Maps Javascript API einfügen. Ich habe schon Google API-Schlüssel bekommen.Google Maps API auf Squarespace

ich gefolgt sind Schritte wie folgt:

Was ich zum Archiv versuchen, nur eine Google-Karte auf meiner Web zeigen.

Schritt 1:

html Legen
<div id="map_canvas"></div> 

Schritt 2 einen einbetten Block für: insert JavaScript in page header

<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false"> 
</script> 

<script type="text/javascript"> 
function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 10, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

Schritt 3: in

Abschnitt benutzerdefinierte CSS
#map_canvas 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
} 

Aber die Codes, die ich auf Squarespace legte, funktionierten nicht. Wie soll ich es machen? Hier ist der Link zu meiner Webseite auf Square

Your Site Title

Dank !!

+0

Probieren Sie den festen Wert der Breite und Höhe. 'Breite: 500px; Höhe: 500px; '. Rest Ihrer Code-Nähte gut –

+0

Kann ich fragen, warum Sie diese Route gehen, wenn Squarespace bereits eine integrierte Integration für Google Maps hat? In diesem Beispiel zeichnen Sie keine Daten, daher ist die Notwendigkeit einer benutzerdefinierten Google-Karte nicht wirklich relevant. Fehle ich etwas? Wenn Sie eine Karte mit mehreren Standorten benötigen, wird Ihr Code ein wenig komplexer, um die Daten aus Squarespace zu erfassen und auf die Karte zu zeichnen ... – jasonbarone

+0

@jasonbarone Entschuldigung für die wirklich späte Antwort. Der Grund, warum ich diesen Weg gehen werde, ist, weil ich später eine Karte mit mehreren Orten machen möchte, wie Sie gesagt haben. Wenn Sie Zeit haben, hoffe ich, dass Sie mir den Weg zu Squarespace sagen würden. Danke. – arccycle

Antwort

0

LoL, du stellst das Skript an einen sehr falschen Ort, denke ich.

1. Legen Sie Ihr Skript, alles nach </body>

2. Sie benötigen eine Abdeckung für Ihre Karten <div> wie ein Wrapper oder so, um es in die Mitte zu setzen. und mit einem Cover/Wrapper Div können Sie die Größe und die Form manipulieren.

3. Ich weiß es nicht id="maps_canvas". weil von google ich bekam <div id='gmap_canvas' style='height:100%;width:100%; position:static'>, war es gmap_canvas. und legen Sie Stil in sie, um sie mit Ihrem Cover/Wrapper div.

einfacher weg: http://embedgooglemaps.com/en/ vielleicht wird es helfen. :)

+0

Name des 'div' kann irgendwas 'gmap' oder' map' oder irgendein zufälliger Name sein. –

+0

yup in der Tat, aber immer Sie verwenden diese http://embedgooglemaps.com/en/ es wird Ihnen sehr helfen. –

+0

Danke, euch alle! Es wird eine große Hilfe für mich sein !! fluss rhun> Wo kann ich '' Code sehen? Ich habe versucht zu finden, wo '' Tag ist auf jeder Einstellungsseite (Seitenkopf, benutzerdefinierte CSS, Code-Injektion) Aber ich konnte es nicht finden ... Und ich hoffe, ich könnte volle Breite-Karte zeigen endlich auf meiner Website. Daher kann ich den Link, den Sie zum Einbetten der Karte gesendet haben, nicht verwenden. – arccycle

0

Dies ist, was ich in meinem Code geändert wie folgt:

Schritt 1: Legen Sie einen Code Block für html < - es ist nicht Block einzubetten wurde, aber Codeblock. Ich habe mich vorher vertippt.

<div id="mapWrapper"> 
    <div id='gmap_canvas' style='height:100%;width:100%; position:static'> 
    </div> 
</div> 

Schritt 2: Sie Javascript in Seitenkopf einzufügen.

ich ändern ID Name nur von 'map_canvas' auf 'gmap_canvas'

<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false"> 
</script> 

<script type="text/javascript"> 
function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 10, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

Schritt 3: in benutzerdefinierte CSS-Abschnitt.

Geänderte ID Namen von 'map_canvas' auf 'mapWrapper', dann eine andere Größe festgelegt.

Ich habe versucht, die meisten von allem, was die Leute mir rieten, aber immer noch die Karte nicht auf meiner Website kommen. Stimmt etwas nicht?

0

Ich tat das gleiche mit my site.

Was ich anders gemacht habe, ist nicht meine # map-Canvas in einem Wrapper. Können Sie bei der Vorschau Ihrer Site Ihren gmap_canvas mit der inspect-Ansicht finden? Es kann sein, dass der Inhalt dort ist und nicht richtig angezeigt wird.

Mein Code:

finden Sie im Seitenkopf Code-Injektion Box. Beachten Sie, dass ein großer Teil dieses Codes (und ich erinnere mich nicht, welche Teile, da ich JS nicht kenne) ist, nur den Stift auf verschiedenen Bildschirmgrößen zentriert zu halten.

<style type="text/css"> 
     html, body, #map-canvas { 
     height: 400px; 
     width 960px; 
     margin: 0; 
     padding: 0;}   

     #banner-area-wrapper { 
     display: none; 
     } 

    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap"> 
    </script> 
    <script type="text/javascript"> 
     function detectBrowser() { 
    var useragent = navigator.userAgent; 
    var mapdiv = document.getElementById("map-canvas"); 

    if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) { 
    mapdiv.style.width = '100%'; 
    mapdiv.style.height = '100%'; 
    } else { 
    mapdiv.style.width = '600px'; 
    mapdiv.style.height = '800px'; 
    } 
} 
     function initialize() { 

var myLatLng = {lat: 39.910073, lng: -82.965509}; 
     var mapOptions = { 
      center: myLatLng, 
      zoom: 14, 
      panControl: false, 
      mapTypeControl: false, 
      zoomControl: true, 
      zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.DEFAULT, 
      position: google.maps.ControlPosition.LEFT_CENTER}, 
      streetViewControl: false 
     }; 
     var map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     title: 'Opportunity Center' 
    }); 

google.maps.event.addDomListener(window, "resize", function() { 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 
}); 
     } 

auf der Seite habe ich einen Code-Block, mit den folgenden darin:

<div id="map-canvas" style="width:90%;margin:auto;"></div> 

Bitte beachte, dass ich nicht meine # map-Leinwand in einem Wrapper hat gesagt, noch irgendetwas in die umfassen Benutzerdefinierte CSS.

Ich machte eine schnelle Dummy-Site und replizierte Ihren Fehler, um die Karte zu zeigen, aber ich weiß nicht genug über Squarespace, um genau zu sagen warum. Ich würde damit anfangen, meinen Code zu kopieren und zu sehen, ob das für Sie funktioniert - es scheint, als wäre der große Unterschied Ihr Wrapper auf der Leinwand.