Code snippet

Details
Written by: Stanko Milosev
Category: Ajax
Hits: 6104
	<script type="text/javascript">
	function ajaxFunction()
	{
		var xmlHttp;
		try
		{
			// Firefox, Opera 8.0+, Safari
			xmlHttp=new XMLHttpRequest();
		}
		catch (e)
		{
			// Internet Explorer
			try
			{
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e)
			{
				try
				{
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e)
				{
					alert("Your browser does not support AJAX!");
					return false;
				}
			}
		}
	}
	</script>

Taken from here.

Example of marker with custom icon (image)

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 139
/*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: 845
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: 882
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.
  1. Create circle on google maps proportional to zoomlevel
  2. Few notes about Google maps
  3. Example of a Javascript Closure: setTimeout Inside a For Loop
  4. idangero.us swiper 2.4.2 example

Subcategories

Ajax

JavaScript

ExtJS


jQuery

Bing Maps AJAX Control, Version 7.0

Knockout

Jasmine

Moment

node.js

Page 1 of 24