[Josh HParticipant]

Hi,
I’m trying to overlay geojson data on a google map using the data layer. I can’t figure out how to do this using the map element in cornerstone. I’ve tried to call a map element on it’s own in a raw html element, but that’s not working either. Can you please let me know how to access the data layer of maps?

Thanks

[LelyModerator]

Hello Josh,

Thanks for posting in. Unfortunately, this is not available on the available map element. We can achieve this by customization because it needs the google MAP API but that would be outside the scope of our support. You may consult a web developer to achieve this. This link might also help:https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple. Thank you for understanding.

[Josh HParticipant]

Yeah, I understand.

Perhaps you can point me in the right direction though, as I’ve got a pretty good understanding of what I need to do. I’m just having trouble calling a Map using a RAW element in cornerstone. Is there an alternate way (besides using an iframe to embed) that we can place a Map on a page besides using the map shortcodes?

I’m trying to place something like this within a RAW code element:

<script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
}
</script>

I already have my API key, but I didn’t include that part in the script above for privacy sake.

But nothing populates in the browser.

[RupokMember]

Hey there,

Thanks for writing back! Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[LelyModerator]

Hello Josh,

Please check the complete sample code here:https://developers.google.com/maps/documentation/javascript/examples/map-simple
On your code, you’re missing the div container where the MAP should be place. See attached screenshots.

    <div id='map'></div>
    <script>
      var map;
   function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });
     }
    </script>
	    <script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyD-PTfCxPy0jnzTTbKuH6JOJoVROx0PrNI&sensor=false&callback=initMap' async defer>
    </script>

Hope this helps.

[Josh HParticipant]

It certainly got me pointed in the right direction! I’ve got it working finally. Thanks so much! Support like this is why I keep buying X. Stellar help as always

[JadeModerator]

You’re most welcome Josh. We’re glad to help.

[Author]

Posts