Jump to content

Google Map API on squarespace

Recommended Posts

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

Link to comment
  • Replies 11
  • Views 11.5k
  • Created
  • Last Reply

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

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

@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 :Google Maps

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 !

capture-decran-2016-06-21-a-174710.jpg.3f30a2061b1907b59919b876d335f837.jpg

capture-decran-2016-06-21-a-174710.jpg.c5d2e543c144e32ef086516a9db76377.jpg

Link to comment

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

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

@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)Google Map

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 !

capture-decran-2016-06-21-a-174710.jpg.1d24766eec973544629a4ce32974fc05.jpg

Link to comment

You need an opening

<script type="text/javascript">

tag before line 7 and a closing

</script>

tag after line 39.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

@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...alt text

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

capture-decran-2016-06-22-a-131757.png.e17f18acda506634db6195ac416b067f.png

Link to comment

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.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

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

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment
  • 1 year later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.