Display multiple places/events/users location on a google map with existing modules from DNN Sharp.
It's true we don't have a DNN Maps module but there's a good reason why: because it is not needed :) as our existing modules are so flexible that you can build your own Google Maps module with only MyTokens, Action Grid and Action Form or just a simple HTML module.
Here's the tutorial that shows you how to:
- show a Google Map in a Static Text field of Action Form
- use MyTokens to generate a list of elements coming from another database token
- display multiple pins/markers on a Google map that can show location of users, places, events, and many more
Don't forget to install Sharp CDN as well as it can drastically improve the loading speed of your website as you can see in the video tutorial here.
Put us to a test and accept our challenge to make your website faster: Get a faster website or win $1,000!
As promised, here is the javascript code you'll need to place in the Static Text field in Action Form in order to generate the Google map with pins on it:
<div id="map" style="height: 500px;"></div>
<script>
function initialize() {
var locations = [
];
window.map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
bounds.extend(marker.position);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
google.maps.event.addListenerOnce(map, 'idle', function(){
if(map.getZoom() > 15){
map.setZoom(15);
}
if(locations.length == 0){
map.setCenter(new google.maps.LatLng(default_latitude_here,default_longitude_here));
map.setZoom(10);
}
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize&key=your_google_maps_api_key_here';
document.body.appendChild(script);
}
loadScript();
</script>