Hello Summer Sale!
Exclusive season-opening discount on TheGem theme.
Limited time offer.

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?

  •  444
    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
  •  444
    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.

  •  444
    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...

  •  444
    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! :)

  •  444
    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.