Generic Google Map Example with Markers
by Arsen
HTML
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="geocode">
<input type="text" value="Мартеновская, Москвы" placeholder="For geocode just put smth" id="geocode-inp" />
<input type="button" value="geocode" id="geocode-btn" />
</div>
<div id="map_div" style="height: 500px;"></div>
<textarea id="out"></textarea>
CSS
body {
margin: 0;
padding: 0;
font: 12px sans-serif;
}
h1,
p {
margin: 0;
padding: 0;
}
#geocode input {
height: 2em;
margin: 2px;
float: left;
display: inline-block;
}
#geocode {
border: #f03 4px dashed;
background: #cacaca;
padding: 15px;
}
#out {
font: monospace;
height: 300px;
width: 90%;
}
JavaScript
google.maps.event.addDomListener(window, "load", function() {
let map = new google.maps.Map(document.getElementById("map_div"), {
center: new google.maps.LatLng(55.7543997, 37.8094875),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}),
bounds = new google.maps.LatLngBounds(),
apiUrl = "http://map-address-api.map.stg.s.o3.ru/api",
geocodeURL = address => `${apiUrl}/geocode?address=${address}`,
revGeoURL = point => `${apiUrl}/rev_geocode?LatLong.lat=${point.lat()}&LatLong.long=${point.lng()}`,
// debugOut generated from http://olado.github.io/doT/index.html
debugOut = function anonymous(arr1) {
var out = '';
if (arr1) {
var ar, i1 = -1,
l1 = arr1.length - 1;
while (i1 < l1) {
ar = arr1[i1 += 1];
if (ar.distance) {
out += 'Distance:\t' + (Math.round(ar.distance *
100) / 100) + 'm\n';
}
out += 'Formatted:\t' + (ar.address.formatted);
if (ar.address.point) {
out += '\nPoint:\t\t' + (ar.address.point.lat) + ', ' + (ar.address.point.long);
}
out += '\n=========\n';
}
}
return out;
},
geocodeDiv = document.getElementById('geocode'),
input = document.getElementById('geocode-inp'),
btn = document.getElementById('geocode-btn'),
debugForGoogle = function anonymous(it) {
var out = '';
var arr1 = it;
if (arr1) {
var address, i1 = -1,
l1 = arr1.length - 1;
while (i1 < l1) {
address = arr1[i1 += 1];
out += '\nFormatted:\t' + (address.formatted_address) + '\nPoint:\t\t' +...