Yet another Maps API with leaflet (OpenStreetMap)
Latest version
<script async defer src="https://unpkg.com/tablacusmapsapi/tablacusmapsapi.js?alias=google&...." ></script>Specify version 0.1.6
<script async defer src="https://unpkg.com/tablacusmapsapi@0.1.6/tablacusmapsapi.js?alias=google&...." ></script><script>
var map;
var geocoder;
function initMap ()
{
var latlng = new google.maps.LatLng(37.78, -122.41);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: latlng
});
geocoder = new google.maps.Geocoder();
}
function setCenter(o)
{
var latlng = new google.maps.LatLng(document.F.centerLat.value, document.F.centerLng.value);
map.setCenter(latlng);
}
function marker(o)
{
var latlng = new google.maps.LatLng(document.F.markerLat.value, document.F.markerLng.value);
var marker = new google.maps.Marker({
title: "Tooltip",
position: latlng,
map: map
});
var infoWin = new google.maps.InfoWindow({content:"marker Info window"});
google.maps.event.addListener(marker, 'click', function(){
infoWin.open(map, marker);
});
}
function markerIcon(o)
{
var latlng = new google.maps.LatLng(document.F.marker2Lat.value, document.F.marker2Lng.value);
var marker = new google.maps.Marker({
title: "Tooltip",
position: latlng,
icon: document.F.marker2Img.value,
map: map
});
var infoWin = new google.maps.InfoWindow({content:"marker Info window"});
google.maps.event.addListener(marker, 'click', function(){
infoWin.open(map, marker);
});
}
function clickEvent(o)
{
o.disabled = true;
google.maps.event.addListener(map, 'click', function (event)
{
document.getElementById("lat").innerHTML = event.latLng.lat();
document.getElementById("lng").innerHTML = event.latLng.lng();
});
}
function circle(o)
{
var circle = new google.maps.Circle({
center: new google.maps.LatLng(document.F.circleLat.value, document.F.circleLng.value),
map: map,
radius: document.F.circleRadius.value
});
}
function rectangle(o)
{
var rectangle = new google.maps.Rectangle({
bounds: new google.maps.LatLngBounds(new google.maps.LatLng(document.F.rect1Lat.value, document.F.rect1Lng.value),
new google.maps.LatLng(document.F.rect2Lat.value, document.F.rect2Lng.value)),
map: map,
});
}
function polyline(o)
{
var patharray = new Array();
var ar = document.F.polylineLatLngs.value.split(/\n/);
for (var i in ar) {
var latlng = ar[i].split(/,/);
if (latlng[0] && latlng[1]) {
patharray.push(new google.maps.LatLng(latlng[0], latlng[1]));
}
}
var polyline = new google.maps.Polyline({
map: map,
path: patharray
});
}
function polygon(o)
{
var patharray = new Array();
var ar = document.F.polygonLatLngs.value.split(/\n/);
for (var i in ar) {
var latlng = ar[i].split(/,/);
if (latlng[0] && latlng[1]) {
patharray.push(new google.maps.LatLng(latlng[0], latlng[1]));
}
}
var polygon = new google.maps.Polygon({
map: map,
paths: patharray
});
}
function geocoding()
{
geocoder.geocode( { 'address': document.F.geoQuery.value },
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlng = results[0].geometry.location;
map.setCenter(latlng);
document.getElementById('geoLat').innerHTML = latlng.lat();
document.getElementById('geoLng').innerHTML = latlng.lng();
var marker = new google.maps.Marker({
title: document.F.geoQuery.value,
position: latlng,
map: map
});
}
}
);
}
function toggle(s)
{
var o = document.getElementById(s);
o.style.display = /none/i.test(o.style.display) ? "block" : "none";
}
</script>
<script async src="https://unpkg.com/tablacusmapsapi/tablacusmapsapi.js?callback=initMap&alias=google"></script>
<div id="map" style="width: calc(100% - 20em); height: 100%; float: left"></div>
<form name="F">
<input type="button" value="+" onclick="toggle('_setCenter')">
<div id="_setCenter" style="display: none">
lat:<input type="number" name="centerLat" value="37.78"><br>
lng:<input type="number" name="centerLng" value="-122.41">
</div>
<input type="button" value="setCenter" onclick="setCenter(this)">
<hr>
<input type="button" value="+" onclick="toggle('_clickEvent')">
<input type="button" value="Click event" onclick="clickEvent(this)">
<div id="_clickEvent" style="display: none">
lat: <span id="lat"></span><br>
lng: <span id="lng"></span><br>
</div>
<hr>
<input type="button" value="+" onclick="toggle('_marker')">
<div id="_marker" style="display: none">
lat: <input type="number" name="markerLat" value="37.78"><br>
lng: <input type="number" name="markerLng" value="-122.41">
</div>
<input type="button" value="Marker" onclick="marker(this)"><br>
<hr>
<input type="button" value="+" onclick="toggle('_marker2')">
<div id="_marker2" style="display: none">
lat: <input type="number" name="marker2Lat" value="37.82"><br>
lng: <input type="number" name="marker2Lng" value="-122.37"><br>
img: <input type="text" name="marker2Img" value="./xf.png">
</div>
<input type="button" value="Marker icon" onclick="markerIcon(this)"><br>
<hr>
<input type="button" value="+" onclick="toggle('_circle')">
<div id="_circle" style="display: none">
lat:<input type="number" name="circleLat" value="37.86"><br>
lng:<input type="number" name="circleLng" value="-122.43"><br>
radius:<input type="number" name="circleRadius" value="2500">
</div>
<input type="button" value="Circle" onclick="circle(this)"><br>
<hr>
<input type="button" value="+" onclick="toggle('_rectangle')">
<div id="_rectangle" style="display: none">
lat:<input type="number" name="rect1Lat" value="37.77"><br>
lng:<input type="number" name="rect1Lng" value="-122.45"><br>
lat:<input type="number" name="rect2Lat" value="37.74"><br>
lng:<input type="number" name="rect2Lng" value="-122.51"><br>
</div>
<input type="button" value="Rectangle" onclick="rectangle(this)"><br>
<hr>
<input type="button" value="+" onclick="toggle('_polyline')">
<div id="_polyline" style="display: none">
<textarea name="polylineLatLngs" style="height: 5em">37.78,-122.44
37.78,-122.47
37.86,-122.49
</textarea>
</div>
<input type="button" value="Polyline" onclick="polyline(this)"><br>
<hr>
<input type="button" value="+" onclick="toggle('_polygon')">
<div id="_polygon" style="display: none">
<textarea name="polygonLatLngs" style="height: 5em">37.77,-122.42
37.80,-122.27
37.72,-122.21
</textarea>
</div>
<input type="button" value="Polygon" onclick="polygon(this)"><br>
<hr>
<input type="button" value="+" onclick="toggle('_geocoding')">
<div id="_geocoding" style="display: none">
lat:<span id="geoLat"></span><br>
lng:<span id="geoLng"></span><br>
<input type="text" name="geoQuery" value="berkeley">
</div>
<input type="button" value="Geocoding" onclick="geocoding(this)"><br>
<hr>
</form>