Forum for discussing general topics related to Couch.
6 posts Page 1 of 1
I have integrated google maps into the couchcms demo so it can be altered in the couchcms admin side, for some reason it don't seem to be working

in the admin side I have added the lat and long info but the coding for the map is not showing on the front end, below is the coding I have

Code: Select all
<cms:template title='Contact Us' order='3'>
    <cms:editable name='my_editable_lat' type='text'/>
   <cms:editable name='my_editable_lng' type='text'/>
</cms:template>

<div id="map"></div>
        <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  //var uluru = {lat: 52.080880, lng: 0.432960};
  var uluru = {lat: <cms:show my_editable_lat />, lng: <cms:show my_editable_lng />};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 16, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MYGOOGLEAPIKEY&callback=initMap">
    </script>


I checked inspect element and no errors are showing and cleared the browser cache but still the google map coding is not showing

Any ideas as I am stuck on this
Does it work with static values that you commented out in the script?
It don't seem to work either with the code that was commented out

For some reason the contact.php page is not showing the following coding

Code: Select all
<div id="map"></div>
        <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: 52.080880, lng: 0.432960};
  //var uluru = {lat: <cms:show my_editable_lat />, lng: <cms:show my_editable_lng />};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 16, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANz8qWkPQle9CgSd-GI1MDFBGh1VQw2o0&callback=initMap">
    </script>
ianhaney50 wrote: I have integrated google maps

If your HTML is not working, CouchCMS can not help to fix it. It may offer various other solutions though - this http://docs.couchcms.com/concepts/google-maps.html or any of the multiple threads about working custom map integrations in Tips&Tricks subforum.
I have just seen the issue, am so stupid. It was because I was adding the coding in between couchcms editable opening and closing tag so now closed the editable tag then put the map coding in and opened a editable tag but it's still not showing

The updated coding is below

Code: Select all
<div class="col-lg-5">
        <cms:editable name='contact_details' label='Contact Details' type='richtext' order='9'>
         <!-- Adress and Phone Details -->
         <h4>Address and Phone</h4>
         <div class="hr dotted clearfix">&nbsp;</div>
         <ul>
            <li>
               <strong>Your Company Name</strong>
                    <br />
               Address Line 1
                    <br />
               Town
                    <br />
               UK
                    </li>
                    <br /><br />
            <li>00000 000000</li>
         </ul>
         </cms:editable>
           
            <div id="map"></div>
        <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  //var uluru = {lat: 52.080880, lng: 0.432960};
  var uluru = {lat: <cms:show my_editable_lat />, lng: <cms:show my_editable_lng />};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('googlemap'), {zoom: 16, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMMta81ltQwlSyeR0yscjSyivdW6YVCRY&callback=initMap">
    </script>


Somehow some instyle css is being added so it is looking like the following

Code: Select all
<div id="map" style="position: relative;overflow: hidden;"></div>
UPDATE: Sussed it and got it working now
6 posts Page 1 of 1