Google Map API on squarespace

Hey guys,

I would like to know where to put the custom code if I want to have a custom map from google map javascript API into squarespace ?

I have my own key already et let's say I want to inject this map in squarespace, what shoul I do ?http://www.w3schools.com/googleapi/tryit.asp?filename=tryhtmlmapoverlays_polygon

In code injection ? code block ?

Will appreciate any help !Thanks

Ordinarily, it's best practice to keep HTML and JavaScript code separate. So although you can, you likely shouldn't put script and HTML in a code block. If you do, be certain to wrap the script in

<script></script>

tags. These are HTML elements that tell the browser that what follows in between them is not HTML but script code.

In this case, rather than a code block for the HTML, I suggest an embed block. You're drawing material from outside your site into your site. That is what the embed block is for. Embed Blocks vs. Code Blocks. Using the Embed Block. The HTML in the embed block should be this:

<div id="googleMap""></div>  

Do not use any of the other HTML you see in the TryIt editor.

In Design > Custom CSS, put:

/* style the Google map */
#googleMap {
 width: 500px;
 height: 380px;
}  

You can, of course, add any additional CSS styling (border, padding, etc.) you would like.

Put the JavaScript in Page Header Code Injection for the page on which you put the map. To reach Page Header Code Injection: from the Home menu, click Pages; select the page you want; click the cogwheel icon to the right of the page name; click Advanced. Enter the JavaScript in the Page Header Code Injection text area. It should look like this:

<script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js">
</script>
<script type="text/javascript">
/* Google Map api */;
... the Javascript code here, in place of this line ...
</script>  

Last October, I worked with another Squarespace user who wanted a responsive map in his site. If your map turns out not to be responsive, have a look at the code at the pen MapBox on Codepen. If you want to make your map responsive and need help, leave a comment here.

I hope this helps. Let me know whether it does and whether you need any further help.

-Steve

@Alxfyv

Thanks a lot for your answer, I really appreciate ! I've done some research from my own. What I want to archieve is a map like this :

So my code after reading different tutorials is like below :

   // Google Map China API (it's targeting a chinese audience and classic google map api is blocked is China)
<script
src="http://maps.google.cn/maps/api/js?key=my-key">
</script>


 //  Define map type and center point
function initMap() {
 var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 12,
   center: {lat: 48.877412, lng: 2.359221},
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 // Define the LatLng coordinates for the polygon's path.
 var 10th = [
   {lat: 48.883863,  lng: 2.349500,},
   {lat: 48.870752,  lng: 2.347915},
   {lat: 48.867593   lng: 2.363981},
   {lat: 48.872958,  lng: 2.377065},
   {lat: 48.877800,  lng: 2.370605},
   {lat: 48.882765,  lng: 2.370164},
   {lat: 48.884218,  lng: 2.368480},
   {lat: 48.884670,  lng: 2.360258}
   {lat: 48.883863,  lng: 2.349500}
 ];

 // Construct the polygon.
 var 10th = new google.maps.Polygon({
   paths: triangleCoords,
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#FF0000',
   fillOpacity: 0.35
 });
 10th.setMap(map);

}

  // CSS to define the map’s size.
<div id="googleMap" style= "width:100%;height:380px;"></div>

So If I follow what you said :

Step 1 : create a embed block where I want to put my map and add the html

Step 2 : inject javascript in page header

Step 3 : use CSS in custom css section to style and make the map responsive

My question is : Supposing my javascript is correct, how do I actually link the javascript with the embed block ? Do I need to put the id:googlemap (or whatever the id name) somewhere into the javascript to make it work ?

Thanks again for taking your time !

For some reason, the contrary editor is not letting me comment today, so I'm putting this in an answer.

Your CSS, line 42, is incorrect. Strike line 42; insert instead:

#googleMap {
 width: 100%;
 height: 380px;
}  

Line 42 is actually HTML with CSS styling inside the HTML

<div>

opening tag. You can't put that in Custom CSS; it'll give a syntax error.

In the embed block, you want just

<div id="googleMap"></div>  

I'm a novice autodidact in JavaScript. But I think line 9 is the reference to the HTML in the embed block where the map will go. Except in this case "map" should read "googleMap". Thus

document.getElementById("googleMap")

.

As I said, I'm a JS novice; but I think your JS has syntax errors. It seems to me there are a lot of commas that either shouldn't be there at all or should be semicolons. Use an online JS syntax checker. A good one is Esprima Syntax Validator.

Your statement in Step 3 is not quite correct. You don't make the map responsive with CSS. You do that with the HTML structure. Look at the HTML in MapBox. That's the kind of structure usually needed to make something like this map responsive.

But what I would say first is just use the one line HTML above in the embed block. If the JS works and you get a map, then check it on mobile devices. If it is responsive, there's nothing else to do. If not, we'll work on getting to be.

-Steve

@alxfyv, thanks a lot for your detailed explanation, I really appreciate ! I've actually done some work from my side (from different tutorials) and here my code :

       // google map china API (since most expected readers are coming from China and standard google map api   would be blocked)
   <script
   src="http://maps.google.cn/maps/api/js?key=my-key">
   </script>

   function initMap() {
     var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 12,
       center: {lat: 48.877412, lng: 2.359221},
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     // Define the LatLng coordinates for the polygon's path.
     var 10th = [
       {lat: 48.883863,  lng: 2.349500,},
       {lat: 48.870752,  lng: 2.347915},
       {lat: 48.867593   lng: 2.363981},
       {lat: 48.872958,  lng: 2.377065},
       {lat: 48.877800,  lng: 2.370605},
       {lat: 48.882765,  lng: 2.370164},
       {lat: 48.884218,  lng: 2.368480},
       {lat: 48.884670,  lng: 2.360258}
       {lat: 48.883863,  lng: 2.349500}
     ];

     // Construct the polygon.
     var 10th = new google.maps.Polygon({
       paths: triangleCoords,
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 2,
       fillColor: '#FF0000',
       fillOpacity: 0.35
     });
     10th.setMap(map);

   }

      // CSS to define the map’s size.
   <div id="googleMap" style= "width:100%;height:380px;"></div>

The expected result should look something like this (expect color)

So If i'm following what you said :

Step 1 : Create a embed block where I want to put my map using :

 <div id="googleMap""></div>  

Step 2 : Inject the javascript code in the page header

Step 3: style the map with CSS to make it responsive

=> My question would be: how link the javascript code in page header to the embed block ? Should I put " id="googleMap " somewhere in the javascript ?

Thanks again !

You need an opening

<script type="text/javascript">

tag before line 7 and a closing

</script>

tag after line 39.

@alxfyv

Thanks again for your time (I'm also on stackoverflow trying to get some answers). Unfortunately it's still not working. But I've tried couple of things.

1)

I did put a embed block

<div id="googleMap"></div>  

2)
I actually followed tutorials from Google and from W3 so my code after corrections are as follow

<script
src="http://maps.google.cn/maps/api/js?key=my-key">
</script>

<script type="text/javascript">
function initMap() {
 var map = new google.maps.Map(document.getElementById('googleMap'), {
   zoom: 12,
   center: {lat: 48.877412, lng: 2.359221},
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 // Define the LatLng coordinates for the polygon's path.
 var 10th = [
   {lat: 48.883863,  lng: 2.349500},
   {lat: 48.870752,  lng: 2.347915},
   {lat: 48.867593,  lng: 2.363981},
   {lat: 48.872958,  lng: 2.377065},
   {lat: 48.877800,  lng: 2.370605},
   {lat: 48.882765,  lng: 2.370164},
   {lat: 48.884218,  lng: 2.368480},
   {lat: 48.884670,  lng: 2.360258},
   {lat: 48.883863,  lng: 2.349500}
 ];

 // Construct the polygon.
 var 10th = new google.maps.Polygon({
   paths: triangleCoords,
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#FF0000',
   fillOpacity: 0.35
 });
 10th.setMap(map);

}
</script>

I tried different api domains to see if the pb is coming from the Chinese domain, its not. I tried also to put the example code from Google tutorial but even this is not working on Squarespace.

=> I basically copied the div in embed block

<div id="map"></div>

=> Then copied the javascript (and put my own key from google console)

var map;
var infoWindow;

function initMap() {
 map = new google.maps.Map(document.getElementById('map'), {
   zoom: 5,
   center: {lat: 24.886, lng: -70.268},
   mapTypeId: google.maps.MapTypeId.TERRAIN
 });

 // Define the LatLng coordinates for the polygon.
 var triangleCoords = [
     {lat: 25.774, lng: -80.190},
     {lat: 18.466, lng: -66.118},
     {lat: 32.321, lng: -64.757}
 ];

 // Construct the polygon.
 var bermudaTriangle = new google.maps.Polygon({
   paths: triangleCoords,
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 3,
   fillColor: '#FF0000',
   fillOpacity: 0.35
 });
 bermudaTriangle.setMap(map);

 // Add a listener for the click event.
 bermudaTriangle.addListener('click', showArrays);

 infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
 // Since this polygon has only one path, we can call getPath() to return the
 // MVCArray of LatLngs.
 var vertices = this.getPath();

 var contentString = '<b>Bermuda Triangle polygon</b><br>' +
     'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
     '<br>';

 // Iterate over the vertices.
 for (var i =0; i < vertices.getLength(); i++) {
   var xy = vertices.getAt(i);
   contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
       xy.lng();
 }

 // Replace the info window's content and position.
 infoWindow.setContent(contentString);
 infoWindow.setPosition(event.latLng);

 infoWindow.open(map);
}

   </script>
   <script async defer
       src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"></script>

And got this...

That's what I got so far and honestly I'm a bit lost...

I'm thinking maybe using Mapbox as an alternative, maybe it's easier...

Actually mapbox is a real alternative to google maps ! Really simple to use and to to embed on SquareSpace !

I put your script, the first script with 'googleMap' as the id, in Esprima Syntax Checker. It says illegal identifier on line 14. The variable name 10th is an illegal variable name. Variable names cannot begin with a numeral. That variable name is used again on lines 27 and 35.

Your script isn't executing because of that.

Otherwise, the script seems to be OK.

You might try changing the variable name 10th in lines 14, 27 and 35 to x10th and see if it runs then.

wow so much work haha - i'm really lost too