Google Map Integration and downloading in AEM
Hi
Offline:- Caching google maps javascript is not allowed, that's because their payment system is based on how many times their javascript API are loaded by the users. One page refresh is equal to one google maps API call, and depending what kind of contract you made you just lost -1 from the total amount of API requests you have purchased. Google doesn't offer an offline version of the Maps API as is. Maps JavaScript API requires an Internet connection to download all the geospatial information it needs to properly display the map. This information cannot be stored and/or served offline.
Solution to your problem are
1. Gmapcatcher :- https://code.google.com/p/gmapcatcher/
//GMapCatcher is an offline maps viewer. It can display maps from many providers such as: CloudMade, OpenStreetMap, Yahoo Maps, Bing Maps, Nokia Maps, SkyVector but not the Google Map
2. http://code.google.com/p/ogmaps/
3. http://code.google.com/p/gmapoffline/
4. Lastly, if Google Earth can meet your needs, then you can use that. Offline usage of Google Earth requires a Google Earth Enterprise license according to http://www.google.com/permissions/geoguidelines.html.
Coming back to AEM integration with Google Maps, Please find below the reference links for it:-
Link:- https://helpx.adobe.com/experience-manager/using/integrating-custom-cq-widgets-third-party.html
//Integrating custom CQ widgets with third-party libraries
Link:- http://aemtechdev.blogspot.in/2016/01/integrate-google-map-api-library-with_14.html
// Project of AEM with Google Maps
I hope this will help you.
Thanks and Regards
Kautuk Sahni
Hi
Can you please look at the answers posted and let us know if this worked for you or not.
If you have devised another way to resolve the issue, please post it in the community for communities benefit.
Thanks and Regards
Kautuk Sahni
Kautuk Sahni
wrote...
I'm still working on the exact requirement. Once, it gets finalized and works accordingly then will post it.
Regards,
Himanshu
Sure, Please share it once it is ready.
Kautuk Sahni
wrote...
is there any success? i should implement multiple markers google maps component
Hi
Could you please let me know that how would you provide lat and long information ? is it that manually we would be adding it to dialog of the component and that component would then place marker? OR is it that you have lat and long in repository and would be consulting repository to place the marker?
The marker code for Google is very simple,
Example:-
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
For multiple Markers :- http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
So you can create the component very easily.
Reference Helpx Article :- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html
//This will help you in creating "how to add JavaScript to a component" (Creating Custom Carousel components for Adobe Experience Manager), on the same fashion you need to add Google Marker API (JavaScript) to create a component.
I hope this would help you.
Thanks and Regards
Kautuk Sahni
Kautuk Sahni
wrote...
It might not be what you need. It is possible to display the map as a static image on the page. https://developers.google.com/maps/documentation/static-maps/
Hi Paul,
This is good to know.
Just for my information, do this also saves bandwidth and page load performance WRT to non Static ?
~kautuk
Kautuk Sahni
Related Conversations
