Okay
  Public Ticket #1463262
Google Map
Closed

Comments

  • Alain started the conversation
    February 9, 2018 at 5:30am

    How can we put a customized google map ? (https://mapstyle.withgoogle.com/)


    the code i have to put in (without my api key of course):


    https://maps.googleapis.com/maps/api/staticmap?key=MY_API_KEY&center=45.55436116630284,-73.66494903564457&zoom=15&format=png&maptype=roadmap&style=feature:administrative%7Celement:labels.text.fill%7Ccolor:0x000000&style=feature:administrative.country%7Cvisibility:off&style=feature:administrative.locality%7Cvisibility:off&style=feature:administrative.neighborhood%7Cvisibility:on&style=feature:administrative.neighborhood%7Celement:labels.text.fill%7Ccolor:0x85edb6&style=feature:administrative.neighborhood%7Celement:labels.text.stroke%7Ccolor:0x303030%7Cvisibility:on%7Cweight:6&style=feature:administrative.province%7Cvisibility:off&style=feature:landscape%7Ccolor:0x303030%7Cvisibility:on&style=feature:landscape.man_made%7Celement:geometry%7Cvisibility:off&style=feature:landscape.man_made%7Celement:labels.text.fill%7Clightness:0%7Cvisibility:off&style=feature:poi%7Ccolor:0x333333%7Cvisibility:off&style=feature:poi%7Celement:geometry%7Cvisibility:off&style=feature:poi%7Celement:labels%7Cvisibility:off&style=feature:poi.attraction%7Cvisibility:off&style=feature:poi.attraction%7Celement:geometry%7Cvisibility:off&style=feature:poi.attraction%7Celement:labels%7Cvisibility:off&style=feature:poi.attraction%7Celement:labels.text%7Cvisibility:off&style=feature:poi.park%7Cvisibility:off&style=feature:poi.park%7Celement:geometry.fill%7Csaturation:-100%7Clightness:60%7Cvisibility:off&style=feature:poi.park%7Celement:labels%7Cvisibility:off&style=feature:poi.sports_complex%7Cvisibility:off&style=feature:poi.sports_complex%7Celement:labels%7Cvisibility:off&style=feature:road%7Ccolor:0x85edb6&style=feature:road.arterial%7Ccolor:0x85edb6&style=feature:road.arterial%7Celement:geometry.fill%7Cvisibility:on&style=feature:road.arterial%7Celement:geometry.stroke%7Cvisibility:off&style=feature:road.arterial%7Celement:labels%7Cvisibility:off&style=feature:road.arterial%7Celement:labels.icon%7Cvisibility:off&style=feature:road.arterial%7Celement:labels.text.fill%7Clightness:-63&style=feature:road.arterial%7Celement:labels.text.stroke%7Cvisibility:off&style=feature:road.highway%7Ccolor:0x85edb6%7Cweight:3.00&style=feature:road.highway%7Celement:labels%7Cvisibility:off&style=feature:road.highway%7Celement:labels.icon%7Cvisibility:off&style=feature:road.highway.controlled_access%7Cweight:3.00&style=feature:road.highway.controlled_access%7Celement:labels%7Cvisibility:off&style=feature:road.local%7Ccolor:0x85edb6%7Cvisibility:on&style=feature:road.local%7Celement:labels%7Cvisibility:off&style=feature:road.local%7Celement:labels.icon%7Cvisibility:off&style=feature:transit%7Cvisibility:off&style=feature:transit.line%7Cvisibility:off&style=feature:water%7Ccolor:0x242424%7Cvisibility:on&style=feature:water%7Celement:labels.text%7Cvisibility:off&size=480x360

  •  1,802
    Support replied
    February 10, 2018 at 5:35pm

    Hi Alain,

    you can try opening /js/scripts.js and replacing

    script.src = 'https://maps.googleapis.com/maps/api/js?' + map_api_key +
          '&callback=ContactMap';

    with your own.

    Don't forget the callback parameter.


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Alain replied
    February 10, 2018 at 10:04pm

    thank but this doesnt work :


    script.src = 'https://maps.googleapis.com/maps/api/staticmap?center=45.55436116630284,-73.66494903564457&zoom=15&format=png&maptype=roadmap&style=feature:administrative%7Celement:labels.text.fill%7Ccolor:0x000000&style=feature:administrative.country%7Cvisibility:off&style=feature:administrative.locality%7Cvisibility:off&style=feature:administrative.neighborhood%7Cvisibility:on&style=feature:administrative.neighborhood%7Celement:labels.text.fill%7Ccolor:0x85edb6&style=feature:administrative.neighborhood%7Celement:labels.text.stroke%7Ccolor:0x303030%7Cvisibility:on%7Cweight:6&style=feature:administrative.province%7Cvisibility:off&style=feature:landscape%7Ccolor:0x303030%7Cvisibility:on&style=feature:landscape.man_made%7Celement:geometry%7Cvisibility:off&style=feature:landscape.man_made%7Celement:labels.text.fill%7Clightness:0%7Cvisibility:off&style=feature:poi%7Ccolor:0x333333%7Cvisibility:off&style=feature:poi%7Celement:geometry%7Cvisibility:off&style=feature:poi%7Celement:labels%7Cvisibility:off&sty...
    ' + map_api_key +
          '&callback=ContactMap';

    ********

    and this not work too...


    script.src = 'https://maps.googleapis.com/maps/api/staticmap?key=AIzaSyDcQCB34Mmkj_BigU1oPs1KO8fn5o2sauw¢er=45.55436116630284,-73.66494903564457&zoom=15&format=png&maptype=roadmap&style=feature:administrative%7Celement:labels.text.fill%7Ccolor:0x000000&style=feature:administrative.country%7Cvisibility:off&style=feature:administrative.locality%7Cvisibility:off&style=feature:administrative.neighborhood%7Cvisibility:on&style=feature:administrative.neighborhood%7Celement:labels.text.fill%7Ccolor:0x85edb6&style=feature:administrative.neighborhood%7Celement:labels.text.stroke%7Ccolor:0x303030%7Cvisibility:on%7Cweight:6&style=feature:administrative.province%7Cvisibility:off&style=feature:landscape%7Ccolor:0x303030%7Cvisibility:on&style=feature:landscape.man_made%7Celement:geometry%7Cvisibility:off&style=feature:landscape.man_made%7Celement:labels.text.fill%7Clightness:0%7Cvisibility:off&style=feature:poi%7Ccolor:0x333333%7Cvisibility:off&style=feature:poi%7Celement:geometry%7Cvisibility:off&style=feature:poi%7Celement:labels%7Cvisibility:off&style=feature:poi.attraction%7Cvisibility:off&style=feature:poi.attraction%7Celement:geometry%7Cvisibility:off&style=feature:poi.attraction%7Celement:labels%7Cvisibility:off&style=feature:poi.attraction%7Celement:labels.text%7Cvisibility:off&style=feature:poi.park%7Cvisibility:off&style=feature:poi.park%7Celement:geometry.fill%7Csaturation:-100%7Clightness:60%7Cvisibility:off&style=feature:poi.park%7Celement:labels%7Cvisibility:off&style=feature:poi.sports_complex%7Cvisibility:off&style=feature:poi.sports_complex%7Celement:labels%7Cvisibility:off&style=feature:road%7Ccolor:0x85edb6&style=feature:road.arterial%7Ccolor:0x85edb6&style=feature:road.arterial%7Celement:geometry.fill%7Cvisibility:on&style=feature:road.arterial%7Celement:geometry.stroke%7Cvisibility:off&style=feature:road.arterial%7Celement:labels%7Cvisibility:off&style=feature:road.arterial%7Celement:labels.icon%7Cvisibility:off&style=feature:road.arterial%7Celement:labels.text.fill%7Clightness:-63&style=feature:road.arterial%7Celement:labels.text.stroke%7Cvisibility:off&style=feature:road.highway%7Ccolor:0x85edb6%7Cweight:3.00&style=feature:road.highway%7Celement:labels%7Cvisibility:off&style=feature:road.highway%7Celement:labels.icon%7Cvisibility:off&style=feature:road.highway.controlled_access%7Cweight:3.00&style=feature:road.highway.controlled_access%7Celement:labels%7Cvisibility:off&style=feature:road.local%7Ccolor:0x85edb6%7Cvisibility:on&style=feature:road.local%7Celement:labels%7Cvisibility:off&style=feature:road.local%7Celement:labels.icon%7Cvisibility:off&style=feature:transit%7Cvisibility:off&style=feature:transit.line%7Cvisibility:off&style=feature:water%7Ccolor:0x242424%7Cvisibility:on&style=feature:water%7Celement:labels.text%7Cvisibility:off&size=480x360'
     +
          '&callback=ContactMap';


    *************

    the first code just doesnt load the page at all, it still on the loader flashing forever... and the second code, the page load but not the map :(


  •  1,802
    Support replied
    February 12, 2018 at 5:08pm

    Sorry Alain, now I notice you are using Google Static Maps Api

    https://developers.google.com/maps/documentation/static-maps/

    You can embed this url anyway in the page content

    <img src="the static google map url here">

    for example


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Alain replied
    February 13, 2018 at 5:36am

    well, i FINALLY found it !!!


    i have to paste the JSON in the scripts.js file at line 1521 (approx.). Below "var settings = { zoom: map_zoom"... and paste my code :

    ********

    styles: [
      {
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#303030"
          }
        ]
      },
      {
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]

    *********


    As i'm not a coder, it took me 3 weeks but i got it ! Damn ;)

  •  1,802
    Support replied
    February 13, 2018 at 1:09pm

    Hi Alain,

    Ok I see if you don't want a still map, yes this is the solution. Excellent!

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy