- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 675
<!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: 715
<!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: 1542
<!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: 3138
(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);