jeffreyvr/locations.json

## locations.json
[{"name":"Villa del Balbianello","address":"via comoedia, 5, 22016 Tremezzina CO, Italy","lat":"45.9661118","lng":"9.2011346"},{"name":"Cortina d'Ampezzo","address":"Cortina d'Ampezzo, Italy","lat":"46.5396066","lng":"12.1343257"},{"name":"Museo della Civilt\u00e0 Romana","address":"Piazza Giovanni Agnelli, 10, 00144 Roma RM, Italy","lat":"41.8308835","lng":"12.4751877"},{"name":"Villa di Fiorano","address":"Via Appia Antica, 400, 00178 Roma RM, Italy","lat":"41.7991554","lng":"12.573976"},{"name":"Hotel Danieli","address":"Castello, 4196, 30122 Venezia VE, Italy","lat":"45.4338669","lng":"12.3399006"},{"name":"Hotel Cala Di Volpe","address":"Costa Smeralda, 07020 Porto Cervo, OT, Italy","lat":"41.0902363","lng":"9.5387878"}]

## map.html
<html>
  <head>
    <title>Google Maps Locator Test</title>

    <style type="text/css">
      html {
        height: 100%
      }

      body {
        height: 100%;
        margin: 0;
        padding: 0;
        font-family: verdana, arial;
      }

      #map_canvas {
        height: 100%;
        max-height: 600px;

        width: 100%;

        border: 5px solid #eee;
      }

      .wrap {
        padding: 25px 0;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
      }
    </style>
  </head>

  <body>

    <div class="wrap">

      <div id="map_canvas"></div>

    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>

    <script type="text/javascript">
      function initialize() {

        // Setup map and options
        var map = new google.maps.Map(document.getElementById("map_canvas"), {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        // Get the Json file data
        $.getJSON("locations.json", function(data) {

          // Loop through the data
          $.each(data, function(key, data) {

            var myLatlng = new google.maps.LatLng(data.lat, data.lng); // set position

            // Add marker to map
            var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
            });

            // Set info window content
            var infoContent = '<strong>' + data.name + '</strong>';
                infoContent+= '<p>' + data.address + '</p>';

            // Add info window
            marker.info = new google.maps.InfoWindow({
              content: infoContent
            });

            // Add listener for info window
            google.maps.event.addListener(marker, 'click', function() {
              marker.info.open(map, marker);
            });

            // Add marker location to loc var
            var loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());

            // extend bounds with loc
            bounds.extend(loc);

          });

        });

        var bounds  = new google.maps.LatLngBounds();

        map.fitBounds(bounds); // auto zoom
        map.panToBounds(bounds); // auto center

      }
    </script>

    <script type="text/javascript">
      $(document).ready(function() {
        initialize(); // init map
      });
    </script>

  </body>
</html>
	<html>
	<head>
	<title>Google Maps Locator Test</title>

	<style type="text/css">
	html {
	height: 100%
	}

	body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: verdana, arial;
	}

	#map_canvas {
	height: 100%;
	max-height: 600px;

	width: 100%;

	border: 5px solid #eee;
	}

	.wrap {
	padding: 25px 0;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	}
	</style>
	</head>

	<body>

	<div class="wrap">

	<div id="map_canvas"></div>

	</div>

	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"></script>

	<script type="text/javascript">
	function initialize() {

	// Setup map and options
	var map = new google.maps.Map(document.getElementById("map_canvas"), {
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	// Get the Json file data
	$.getJSON("locations.json", function(data) {

	// Loop through the data
	$.each(data, function(key, data) {

	var myLatlng = new google.maps.LatLng(data.lat, data.lng); // set position

	// Add marker to map
	var marker = new google.maps.Marker({
	position: myLatlng,
	map: map,
	});

	// Set info window content
	var infoContent = '<strong>' + data.name + '</strong>';
	infoContent+= '<p>' + data.address + '</p>';

	// Add info window
	marker.info = new google.maps.InfoWindow({
	content: infoContent
	});

	// Add listener for info window
	google.maps.event.addListener(marker, 'click', function() {
	marker.info.open(map, marker);
	});

	// Add marker location to loc var
	var loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());

	// extend bounds with loc
	bounds.extend(loc);

	});

	});

	var bounds = new google.maps.LatLngBounds();

	map.fitBounds(bounds); // auto zoom
	map.panToBounds(bounds); // auto center

	}
	</script>

	<script type="text/javascript">
	$(document).ready(function() {
	initialize(); // init map
	});
	</script>

	</body>
	</html>