I have assets stored in AEM that have lat/long attributes. I would like to create a component that lets users select one of these assets and then it will create a google map with marker for that lat/long.
To accomplish this I have created a component that has googlemap.html in apps/foo/components/content/googlemap/googlemap.html with the following code
<div data-sly-use.ev="Google" id="${ev.googleClass || ''}" > ${ev.googleClass @ context='unsafe'} </div> <style> #map-canvas { width: 500px; height: 400px; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var mapCanvas = document.getElementById('map-canvas'); var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { center: myLatlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(mapCanvas, mapOptions) var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!' }); } google.maps.event.addDomListener(window, 'load', initialize); </script>In my Java class, Google.java, I have the getGoogleClass() method that looks like this:
public String getGoogleClass() { if (htmloutput == null){ return ""; } return "map-canvas"; }htmloutput is assigned a value in the activate() method so that when the user selects the asset, I grab its lat/long attributes.
Problem I'm having is that the map does not show up after I select the asset. It only shows up if I reload the entire page. I believe this might be happening because when the page initially loads up, the getGoogleClass() returns nothing so document.getElementById('map-canvas') is empty. Is there a way to do this better such that the map shows up when the asset is selected the first time?
