Another example of google maps for copy / paste purpose

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