Created
October 10, 2017 10:38
-
-
Save jeffreyvr/12b3d3ff5908fc0816f930d9e814d16e to your computer and use it in GitHub Desktop.
Google Maps Center Map based on Markers (json)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[{"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"}] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment