Skip to content

Instantly share code, notes, and snippets.

@baslie

baslie/2GIS-map.html

Last active September 22, 2016 08:12
Show Gist options
  • Save baslie/d74e6c024b6a69225c5102ed1294fc9b to your computer and use it in GitHub Desktop.
Save baslie/d74e6c024b6a69225c5102ed1294fc9b to your computer and use it in GitHub Desktop.
Download ZIP
Full-width 2GIS Map with popup
Raw
2GIS-map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Full-width 2GIS Map</title>
<style>
.map {
margin: 0;
padding: 0;
}
.map .map-canvas {
width: 100%;
height: 400px;
}
.map .leaflet-popup-content-wrapper {
/* 2GIS api hack */
width: 300px;
}
</style>
</head>
<body>
<section class="map">
<div id="map_canvas" class="map-canvas"></div>
</section>
<script src="http://maps.api.2gis.ru/2.0/loader.js"></script>
<script>
DG.then(function() {
var my_map,
my_popup,
my_marker,
my_coords = [56.51981268504425, 85.04803529200107]; // Your cordinates
my_map = DG.map('map_canvas', {
center: my_coords,
zoom: 16,
scrollWheelZoom: false
});
my_popup = DG.popup({
sprawling: true
})
.setLatLng(my_coords)
.setContent('<div style="font-size: 18px; text-align: center;"><strong>Subject</strong><br><span style="font-size: 14px;">Text text text text text text text text text</span></div>')
.openOn(my_map);
my_marker = DG.marker(my_coords, {
label: 'Click it :)'
})
.addTo(my_map)
.bindPopup(my_popup)
.openPopup(my_popup);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment