Hi,
I tried AEM Google Maps API Integration descried in the below UR:
When I created a page and opened it, the following is what I see.
I read that this code was tested on Adobe CQ 5.5, Adobe CQ 5.6, while I am using AEM 6.1.
Kindly guide me.
Thanks,
Rama.
Just replace maptemplate.jps with following code :
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCVJYehUvkKZNcxsWx8vjD6FPDZBCRegX4&callback=initMap">
</script>
<script type="text/javascript">
function getMap(lat,lng) {
var myOptions = {
center: new google.maps.LatLng(lat,lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
myOptions);
}
</script>
<form >
Latitude: <input type="text" name="lat" value="37.3041" />
Longitude: <input type="text" name="lng" value="-121.8727"/>
<button type="button" onclick="getMap(lat.value,lng.value)" >Click Me!</button>
</form>
</body>
<cq:include path="par" resourceType="foundation/components/parsys" />
</html>
And make sure not to add <> before and after your API token. In above code replace API key with your API key.
It would work. Just tested it on AEM 6.3
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.