Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
AEM Google Maps API Integration
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.
1 Accepted Solution
Correct answer by
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
Kautuk Sahni
[This is more of Google Maps Question than AEM]
Some Pointers to check here:
1. Make sure you inserted the API key correctly
2. Make sure you generated "Google Maps JavaScript API" key not Android, iOS, etc. key.
3. While copying API, make your you have enabled it
4. Try the HTML code mentioned here Adding a Google Map with a Marker to Your Website | Google Maps JavaScript API | Google Develope... instead of code present in Article. [Make sure to cope API key in the code]
5. Also try copy pasting the code directly in HTML file and check in the Chrome browser.
6. Just check if there is some restrictions set within API console https://console.developers.google.com/flows/enableapi , if so revove it.
6. If above things still doesn't work, please create a question in Google Forums.
@edubey "You have to allow certain domains on your google map account."
I guess this is not required now. But it would be great if you can share some information related to this.
Kautuk Sahni
More information here -- i just got my Google key here:
Getting Started | Google Maps JavaScript API | Google Developers
Once i embedded the KEY into the code - it worked perfectly on 6.3 --
Correct answer by
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
Kautuk Sahni
Related Conversations
