Example of marker with custom icon (image)

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 676
/*global google, $*/
(function () {
    "use strict";

    var mapOptions,
        mapCanvas,
        map;

    mapOptions = {
        zoom: 13,
        center: { lat: 50.7787589, lng: 7.1877042 },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    mapCanvas = document.getElementById('map-canvas');

    map = new google.maps.Map(mapCanvas, mapOptions);

    var gpsLatLng = new google.maps.LatLng(50.7787589, 7.1877042);

    var marker = new google.maps.Marker({
        position: gpsLatLng,
        map: map,
        icon: 'excaliburResized.jpg'
    });
}());

Display KML file in Google maps

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 1605
Here I wrote the example on how to generate KML files, and here is my example of displaying KML files on google maps. First problem is that it seems that KML has to be publicly accessible otherwise it will not work. Here try to research more about it. HTML: 
<!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()

Another example of google maps for copy / paste purpose

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 1559
Here I have already gave one stupid simple example for copy / paste purpose, now here is another for loading and displaying JSON file as marker. You will also need jquery-3.6.0.

HTML: 

<!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.

Create circle on google maps proportional to zoomlevel

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 2556
Example partly taken from here.

HTML: 

<!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:

  1. Few notes about Google maps
  2. Example of a Javascript Closure: setTimeout Inside a For Loop
  3. idangero.us swiper 2.4.2 example
  4. Promises

Page 1 of 9