- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 1484
<!DOCTYPE html>
<html>
<head>
<script defer src="https://maps.googleapis.com/maps/api/js"></script>
<script defer src="index.js"></script>
</head>
<body>
<div id="map-canvas" style="width: 100%; height: 100%"></div>
<style>
html, body, #map-canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
</body>
JS:
/*global google, $*/
(function (){
"use strict";
var mapOptions
, mapCanvas
, map
, src = 'http://projects.milosev.com/js/kml/kml.kml';
mapOptions = {
zoom: 13,
center: { lat: 50.7308924, lng: 7.0969354},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapCanvas = document.getElementById('map-canvas');
if (!map) {
map = new google.maps.Map(mapCanvas, mapOptions);
}
var kmlLayer = new google.maps.KmlLayer({
url: 'http://milosev.com/kml/kml.kml' + "?dummy="+(new Date()).getTime()
, map: map
});
}());
Example see here. One more thing, google keeps KML file in cache for some time, it seems minimum is 5 min. That is why I am using the code:
'http://milosev.com/kml/kml.kml' + "?dummy="+(new Date()).getTime()
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 1473
<!DOCTYPE html>
<html>
<head>
<script defer src="https://maps.googleapis.com/maps/api/js"></script>
<script defer src="jquery-3.6.0.js"></script>
<script defer src="test.js"></script>
</head>
<body>
<div id="map-canvas" style="width: 100%; height: 100%"></div>
<style>
html, body, #map-canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
</body>
JS:
/*global google, $*/
(function (){
"use strict";
var mapOptions,
mapCanvas,
map;
mapOptions = {
zoom: 13,
center: { lat: 50.7308924, lng: 7.0969354},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapCanvas = document.getElementById('map-canvas');
if (!map) {
map = new google.maps.Map(mapCanvas, mapOptions);
}
$.getJSON("test.json", function (data) {
data.forEach(function (gpsNode) {
var gpsLatLng = new google.maps.LatLng(gpsNode.lat, gpsNode.lng);
var marker = new google.maps.Marker({
position: gpsLatLng,
map: map
});
});
});
}());
Where JSON looks like:
[
{
"lat": "50.7787589",
"lng": "7.1877042"
},
{
"lat": "50.7787589",
"lng": "7.1877042"
},
{
"lat": "50.7787589",
"lng": "7.1877042"
}
]
Download from here.
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 2431
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script defer src="https://maps.googleapis.com/maps/api/js"></script> <script defer src="./js/index.js"></script> <link type="text/css" rel="stylesheet" href="./css/index.css" /> </head> <body> <div id="map-canvas"></div> </body> </html>JS:
/*global google*/
(function (ns){
"use strict";
var mapOptions,
mapCanvas,
map,
gpsViewModel;
mapOptions = {
zoom: 6,
center: { lat: -34.397, lng: 150.644},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapCanvas = document.getElementById('map-canvas');
if (!map) {
map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function (event) {
var p = Math.pow(2, (21 - map.getZoom()));
new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: { lat: event.latLng.lat(), lng: event.latLng.lng()},
editable: true,
draggable: true,
radius: p * 1128.497220 * 0.0027
});
});
}
}({}));
Notice options: editable: true and draggable: true. With these options circles are editable and draggable.
Also notice line: var p = Math.pow(2, (21 - map.getZoom())); and option radius: p * 1128.497220 * 0.0027. Like this circle is always proportional to zoom level. Live example:
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 4059
(function (ns) {
/*globals google, map*/
"use strict";
var map;
function initMap() {
try {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: { lat: 34.397, lng: 150.644 },
scrollwheel: true,
zoom: 2
});
}
catch (e) {
console.log(e);
setTimeout(function () {
if (typeof google !== 'object') {
location.reload();
}
}, 1000);
}
ns.map = map;
}
ns.initMap = initMap;
})(window.milosev);
POI fix for "google is not defined" error:
setTimeout(function () {
if (typeof google !== 'object') {
location.reload();
}
}, 1000);
POI fix for "initMap is not a function" error:
function initMap() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: { lat: 34.397, lng: 150.644 },
scrollwheel: false,
zoom: 2
});
ns.map = map;
}
Where HTML part should look like:
<script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=myKey;callback=window.milosev.initMap"></script>Notice: window.milosev.initMap My solution for zoom after fitBounds:
(function (ns) {
/*globals google, $*/
"use strict";
$.getJSON("djala.json", function (data) {
data.forEach(function (file) {
var picsLatLng = new google.maps.LatLng(file.Latitude, file.Longitude);
var bounds = new google.maps.LatLngBounds();
var marker = new google.maps.Marker({
position: picsLatLng,
map: ns.map,
title: file.FileName,
url: file.FileName
});
marker.addListener('click', function () {
window.open(marker.url, "_target");
});
bounds.extend(picsLatLng);
ns.map.fitBounds(bounds);
var zoomChangeBoundsListener =
google.maps.event.addListenerOnce(ns.map, 'bounds_changed', function(event) {
if ( ns.map.getZoom() ){
ns.map.setZoom(14); // set zoom here
}
});
setTimeout(function(){
google.maps.event.removeListener(zoomChangeBoundsListener);
}, 2000);
});
});
})(window.milosev);
POI:
var zoomChangeBoundsListener =
google.maps.event.addListenerOnce(ns.map, 'bounds_changed', function(event) {
if ( ns.map.getZoom() ){
ns.map.setZoom(14); // set zoom here
}
});
setTimeout(function(){
google.maps.event.removeListener(zoomChangeBoundsListener);
}, 2000);