Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

handac

Member
  • Content Count

    31
  • Joined

  • Last visited

  1. Actually mapbox is a real alternative to google maps ! Really simple to use and to to embed on SquareSpace !
  2. I'm thinking maybe using Mapbox as an alternative, maybe it's easier...
  3. @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...
  4. @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 !
  5. @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 !
  6. 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
×
×
  • Create New...