Code snippet

Details
Written by: Stanko Milosev
Category: Ajax
Hits: 7478
	<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.

Display GeoJson file in Google Maps

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 105

Since the KmlLayer class is deprecated, here is example how to display GeoJson in Google Maps.

Here is an example. Download from here.

For JavaScript part ony one mehtod will be needed: loadGeoJson.

JSON:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "name": "test",
                "description": "test",
                "styleUrl": "styleUrl test"
            },
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        6.982319,
                        50.2130308,
                        501.04836764077118
                    ],
                    [
                        6.9824246,
                        50.2129917,
                        501.97646533551074
                    ],
                    [
                        6.9826037,
                        50.2127794,
                        501.42517669008419
                    ],
                    [
                        6.9825968,
                        50.2127444,
                        501.50966809629153
                    ]
                ]
            }
        }
    ]
}
Javascript: 
map.data.loadGeoJson("badBertrich.geojson");

Example of marker with custom icon (image)

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 1281
/*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: 2362
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()
  1. Another example of google maps for copy / paste purpose
  2. Create circle on google maps proportional to zoomlevel
  3. Few notes about Google maps
  4. Example of a Javascript Closure: setTimeout Inside a For Loop

Subcategories

Ajax

JavaScript

ExtJS


jQuery

Bing Maps AJAX Control, Version 7.0

Knockout

Jasmine

Moment

node.js

Page 1 of 24