Take your website
To the next level
Discover our newly launched customization services and elevate your web projects to new heights.
Delegate tasks, save time, and unlock the power of professional WordPress outsourcing.

Okay
  Public Ticket #1200017
Problems with Google Maps module
Closed

Comments

  • holografico started the conversation

    I'm building this site using the Construction template. In this template, you put a dark Google Maps module in the bottom, near the footer area. But the code isn't working in this installation. What's happening?

    Also: how can I generate a black map like this for a location I chose?

  •  433
    Sergio replied

    HI!

    pls. share the wp-admin access, we'll check

    If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated!  (How to rate).

    Regards Sergio Codex.

  •   holografico replied privately
  •  433
    Sergio replied

    HI,

    You have a very old version of the theme, update it http://codex-themes.com/thegem/documentation/video-tutorials/


    If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated!  (How to rate).

    Regards Sergio Codex.

  •  433
    Sergio replied

    Add shortcode ROW HTML (screen 912) with the following code

    <div id="map-canvas" style="width: 100%; height: 500px;"></div>
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyDBS5N1YGtIw-ojveSvI4nC268n8peJ_yo&v=3.exp&signed_in=true&ver=4.2.8"></script>
    <script type="text/javascript"> function initialize() {
        var mapOptions = {
            zoom: 11,
            center: {lat: 40.723361, lng: -74.04437},
            mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']},  
            disableDefaultUI: true,
            disableDoubleClickZoom: true,
            scrollwheel: true, // change
            draggable: true // change
        };
        var styles =[{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":"70"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"off"},{"color":"#000000"},{"lightness":"30"}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"on"},{"gamma":"0"},{"lightness":"-50"},{"saturation":"-90"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":"10"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21},{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":"40"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":"16"},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":"20"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#171717"},{"lightness":17}]}];
        var styledMap = new google.maps.StyledMapType(styles,
        {name: "Styled Map"});
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');
    }
        
    google.maps.event.addDomListener(window, 'load', initialize); </script>

    If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated!  (How to rate).

    Regards Sergio Codex.

  • holografico replied

    Thank you very much! :)

    But how do I personalize the location this map is going to show?

  • holografico replied

    BTW, my wp-admin panel informs that my theme is up-tp-date...

  •  433
    Sergio replied

    HI,

    The map was created using the service https://snazzymaps.com/

    Coordinates are defined in this line of code:

    center: {lat: 40.723361, lng: -74.04437},
    


    If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated!  (How to rate).

    Regards Sergio Codex.

  • holografico replied

    Thank you! Case closed! :)

  •  433
    Sergio replied

    HI, 

    Feel free to contact us if you need help. 

    If you’re happy with our theme, please rate us with 5 stars on Themeforest. It keeps us motivated!  (How to rate).

    Regards Sergio Codex.