Monitor Reply

Support

Google Map Api3 conflict

Permalink Browser Info Environment October 14, 2017 at 8:47 PM

Hi there,

First just want to say this theme is super nice and really enjoying using it so far.

I've encountered a strange problem in regards to using Google map API to produce a styled map. I know that it works and have tested it on other themes - I'm only encountering this problem in Genesis.

For Example.. Using the sample code from google and my API key I have attached two screen shots:

@ screen shot 21.34.22 - this is the sample code below for google maps, no styling added - notice how the icons on the UI for google are corrupted..

@screen shot 21.36.31 - this is the same code above, but with added styling - the map completely dissappears.. icons of the UI still corrupted.

This is all I have in my view (in this instance using googles sample demo):

<?php
defined('C5_EXECUTE') or die("Access Denied.");
?>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */

Viewing 15 lines of 39 lines. View entire code block.

 
<?php
defined('C5_EXECUTE') or die("Access Denied.");
?>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map" style = "height: 200px; width: 300px;"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key= XXXXXX &callback=initMap"
    async defer></script>
    <script>
      var map;
            var styles = [{"featureType":"landscape","stylers":[{"hue":"#F1FF00"},{"saturation":-27.4},{"lightness":9.4},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#0099FF"},{"saturation":-20},{"lightness":36.4},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#00FF4F"},{"saturation":0},{"lightness":0},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FFB300"},{"saturation":-38},{"lightness":11.2},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#00B6FF"},{"saturation":4.2},{"lightness":-63.4},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#9FFF00"},{"saturation":0},{"lightness":0},{"gamma":1}]}];
 
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8,
          styles: styles
 
        });
      }
    </script>
 
  </body>
</html>

At the moment we can use no styling on the maps to get by - but it really does throw the design off on the website as there's many pages with these maps that need styling and a working UI.. I spent the last few hours checking all my code and testing it on other themes.. I think there must be a conflict with the API and Genesis..

Your help would be greatly appreciated!!!

Many thanks,
Omar

2 Attachments

Type:	Ticket
Status:	Archived

c5box replied on Oct 14, 2017 at 10:31 pm Permalink Reply

Hi Omar,

Thanks for the feedback. Yeah I think there is a CSS conflict with my theme and the API. Can you send me a link to the broken map UI so I can check the frontend code. I think this can easily be fixed. Send me the link and I'll update my theme a soon as possible.

Thanks and regards,
James

omars786 replied on Oct 15, 2017 at 7:02 am Permalink Reply

Hi James,

Thanks very much for the quick response!

The server I'm writing this website is not live yet and I can't show you a preview unless you change your hosts file..

I set up a new domain, installed the latest Concrete and your Theme.. added a single page and only put the sample code from google for a simple map:

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;

Viewing 15 lines of 34 lines. View entire code block.

 
 
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body onload = "initMap()">
    <div id="map" style = "height: 200px; width: 300px;"></div>
 
    <script>
      var map;
 
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8,
 
        });
      }
    </script>
      <script src="https://maps.googleapis.com/maps/api/js?key=xxxxx&callback=initMap"
    async defer></script>
 
  </body>
</html>

you can access it here:http://bournemouthstudenttours.com/test...

Many thanks,
Omar

omars786 replied on Oct 15, 2017 at 7:03 am Permalink Reply

sorry this one->http://www.bournemouthstudenttours.com/test...

c5box replied on Oct 15, 2017 at 7:45 am Permalink Reply

Hi!

Thanks for the link. Found the issue and updated the theme with a fix. Please update to version 1.1.5.1 and clear cache. Please let me know if it works on your end. :)

Kind regards,
James

omars786 replied on Oct 15, 2017 at 8:16 am Permalink Reply

Amazing thanks James - working amazingly!

ConcreteCMS replied on Oct 30, 2017 at 12:02 am Permalink Reply

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

Genesis

Support

Google Map Api3 conflict

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post