An interactive display of geographic information that you can use for location and more.
Leaflet a javaScript library for mobile-friendly interactive maps
Include leaflet css and javascript file in the head of the document:
<link href=" ../leuuu2/lib/leaflet/leaflet.css" rel="stylesheet">
<script src=" ../leuuu2/lib/leaflet/leaflet-src.js"></script>Put a div element with a certain id where you want your map to be:
<div id="mapid" style="height:500"></div>Initialize the map and do some stuff with it.
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
</script>Allows you to use the potential of Google Maps in a simple way.
Include gmaps javascript file and api in the head of the document:
<script src="http://maps.google.com/maps/api/js?key=[your-key-here]"></script>
<script src=" ../leuuu2/lib/gmaps/gmaps.js"></script>Put a div element with a certain id where you want your map to be and initialize the map
<div id="map"></div>
<script>
var map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
</script>