-
Notifications
You must be signed in to change notification settings - Fork 1
/
mapa.html
88 lines (74 loc) · 2.65 KB
/
mapa.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
</style>
<script
src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
var centros_objects = [
{
"idCentro":1,
"calle":"Mexico",
"numExterior":"5",
"numInterior":"2",
"codigoPostal":"06100",
"telefono":"5585405850",
"latitud":"19.413821",
"longitud":"-99.169573",
"horario":"De 10 a 14",
"estatus":"verificado",
"idTipo":2,
"referencia":"En la paleteria Artik"
},
{
"idCentro":1,
"calle":"Chilpancingo",
"numExterior":"41",
"numInterior":"401",
"codigoPostal":"06100",
"telefono":"5585405850",
"latitud":"19.413821",
"longitud":"-99.239573",
"horario":"De 10 a 14",
"estatus":"verificado",
"idTipo":2,
"referencia":"En la paleteria Artik"
}];
$(document).ready(function() {
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(19.413, -99.239573),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
for ( var i = 0; i < centros_objects.length; i++ ) {
var latLng = new google.maps.LatLng(centros_objects[i].latitud, centros_objects[i].longitud);
var content = "<h2>Centro de Acopio</h2><div><p>"+ centros_objects[i].calle+"</p><p>"+centros_objects[i].referencia+"</p></div><h4>"+centros_objects[i].estatus+"</h4>"
var marker = new google.maps.Marker({
position: latLng,
map: map
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>