Skip to content

Instantly share code, notes, and snippets.

@andresfpatino

andresfpatino/index.html

Created June 9, 2020 15:22
Show Gist options
  • Save andresfpatino/251995eb3dbe21f2cb4c527c81077891 to your computer and use it in GitHub Desktop.
Save andresfpatino/251995eb3dbe21f2cb4c527c81077891 to your computer and use it in GitHub Desktop.
Download ZIP
Mapa con filtro de localización de tiendas - API Google maps
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Api maps</title>
</head>
<body>
<div id="informacion">
<h3 id="titulo">Localiza tu tienda</h3>
<div id="filtrosMapa">
<select id="ciudades" onchange="selectCity(this.value);">
<option selected>Seleccione una ciudad</option>
</select>
<select id="tiendas" onchange="selectStore(this.options[this.selectedIndex]);" style="display:none;">
<option selected>Seleccione una tienda</option>
</select>
</div>
<div id="infoTiendas" class="infoTiendas" style="display:none;">
<div class="infowindow">
<h4 id="nombre"></h4>
<p id="dirección"></p>
<p id="telefono"></p>
<p id="horario"></p>
<p id="adicional"></p>
</div>
</div>
</div>
<div id="map"></div>
<script src="pointers.js"></script>
<script src="init.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSjLAWiMf380MFgXWfwjhxNHS5ey0agPM&callback=initMap" async defer></script>
</body>
</html>
Raw
init.js
<script>
var map, infoWindow;
var markers = [];
function initMap() {
var myLatLng = {lat: 6.196528, lng: -75.577135};
map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 4
});
var x = document.getElementById("ciudades");
for (let city in locales) {
if (locales.hasOwnProperty(city)) {
var option = document.createElement("option");
option.text = locales[city].name;
option.value = city;
var sel = x.options[x.selectedIndex];
x.add(option, sel);
}
if (locales.hasOwnProperty(city)) {
infowindow = new google.maps.InfoWindow();
for (let store in locales[city].stores) {
var point = locales[city].point.split(",");
map.setCenter({ lat: parseFloat(point[0]), lng: parseFloat(point[1]) } );
map.setZoom(13);
if (locales[city].stores.hasOwnProperty(store)) {
//
var pointStore = locales[city].stores[store].point;
pointStore = pointStore.split(",");
var icon = {
url: "http://67.205.168.253/wp-content/uploads/2018/07/maps.png", // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var marker = new google.maps.Marker({
map: map,
position: {lat: parseFloat(pointStore[0]), lng: parseFloat(pointStore[1])},
title: locales[city].stores[store].name,
icon: icon,
});
//var infowindow = new google.maps.InfoWindow({content:contentString});
markers[locales[city].stores[store].name] = marker;
markers[locales[city].stores[store].name].addListener('click', function() {
infowindow.close(); // Close previously opened infowindow
infowindow.setContent("<div class='infoWindow text-center'><h4>" + locales[city].stores[store].name + "</h4><p><strong>Dirección:</strong> "+ locales[city].stores[store].address +"</p><p><strong>Teléfono:</strong> " + locales[city].stores[store].phone + "</p> <p><strong>Horario:</strong> " + locales[city].stores[store].horario + "</p></div>");
document.getElementById("infoTiendas").style.display = 'block';
document.getElementById("nombre").innerHTML = locales[city].stores[store].name;
document.getElementById("dirección").innerHTML = "<strong>Dirección:</strong> " + locales[city].stores[store].address;
document.getElementById("telefono").innerHTML = "<strong>Teléfono:</strong> "+ locales[city].stores[store].phone;
document.getElementById("horario").innerHTML = "<strong>Horario:</strong> " + locales[city].stores[store].horario;
infowindow.open(map, markers[locales[city].stores[store].name]);
});
}
}
}
}
jQuery('#ciudades option[selected]').insertBefore('#ciudades option:first-child')
}
function removeOptions(selectbox)
{
var i;
for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
{
selectbox.remove(i);
}
}
function selectCity(city){
document.getElementById("infoTiendas").style.display = 'none';
document.getElementById("tiendas").style.display = 'block';
removeOptions(document.getElementById("tiendas"));
var x = document.getElementById("tiendas");
var contentString = '';
infowindow = new google.maps.InfoWindow();
if (locales.hasOwnProperty(city)) {
for (let store in locales[city].stores) {
var point = locales[city].point.split(",");
map.setCenter({ lat: parseFloat(point[0]), lng: parseFloat(point[1]) } );
map.setZoom(13);
if (locales[city].stores.hasOwnProperty(store)) {
var option = document.createElement("option");
option.text = locales[city].stores[store].name;
option.value = locales[city].stores[store].name;
option.setAttribute('data-address',locales[city].stores[store].address);
option.setAttribute('data-hours',locales[city].stores[store].horario);
option.setAttribute('data-point',locales[city].stores[store].point);
option.setAttribute('data-phone',locales[city].stores[store].phone);
contentString = "<div class='infoWindow text-center'><h2>" + locales[city].stores[store].name + "</h2><p><strong>Dirección:</strong> "+ locales[city].stores[store].address +"</p><p><strong>Teléfono:</strong> " + locales[city].stores[store].phone + "</p> <p><strong>Horario:</strong> " + locales[city].stores[store].horario + "</p></div>";
var sel = x.options[x.selectedIndex];
x.add(option, sel);
//
var pointStore = locales[city].stores[store].point;
pointStore = pointStore.split(",");
var icon = {
url: "http://67.205.168.253/wp-content/uploads/2018/07/maps.png", // url
scaledSize: new google.maps.Size(30, 30), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var marker = new google.maps.Marker({
map: map,
position: {lat: parseFloat(pointStore[0]), lng: parseFloat(pointStore[1])},
title: locales[city].stores[store].name,
icon: icon,
});
//var infowindow = new google.maps.InfoWindow({content:contentString});
markers[locales[city].stores[store].name] = marker;
markers[locales[city].stores[store].name].addListener('click', function() {
infowindow.close(); // Close previously opened infowindow
infowindow.setContent("<div class='infoWindow text-center'><h4>" + locales[city].stores[store].name + "</h4><p><strong>Dirección:</strong> "+ locales[city].stores[store].address +"</p><p><strong>Teléfono:</strong> " + locales[city].stores[store].phone + "</p> <p><strong>Horario:</strong> " + locales[city].stores[store].horario + "</p></div>");
document.getElementById("infoTiendas").style.display = 'block';
document.getElementById("nombre").innerHTML = locales[city].stores[store].name;
document.getElementById("dirección").innerHTML = "<strong>Dirección:</strong> " + locales[city].stores[store].address;
document.getElementById("telefono").innerHTML = "<strong>Teléfono:</strong> "+ locales[city].stores[store].phone;
document.getElementById("horario").innerHTML = "<strong>Horario:</strong> " + locales[city].stores[store].horario;
infowindow.open(map, markers[locales[city].stores[store].name]);
// if (document.getElementById("tiendas").options.value == locales[city].stores[store].name){
// alert(city);
// }
});
}
}
var optionSelected = document.createElement("option");
optionSelected.text = "Seleccione una tienda";
optionSelected.value = "Seleccione una tienda";
optionSelected.setAttribute('selected',"selected");
var sel = x.options[x.selectedIndex];
x.add(optionSelected, sel);
}
jQuery('#tiendas option[value="Seleccione una tienda"]').insertBefore('#tiendas option:first-child')
}
function selectStore(store){
if(store.value != 'Seleccione una tienda') {
var name = store.value;
var point = store.getAttribute('data-point');
var address = store.getAttribute('data-address');
var hours = store.getAttribute('data-hours');
var phone = store.getAttribute('data-phone');
document.getElementById("infoTiendas").style.display = 'block';
document.getElementById("nombre").innerHTML = name;
document.getElementById("dirección").innerHTML = "<strong>Dirección:</strong> " + address;
document.getElementById("telefono").innerHTML = "<strong>Teléfono:</strong> "+ phone;
document.getElementById("horario").innerHTML = "<strong>Horario:</strong> " + hours;
infowindow.close()
google.maps.event.trigger(markers[store.value], 'click');
}
}
function createcities(){
}
initMap();
createcities();
</script>
Raw
pointers.js
<script>
let locales = {
"apartado":{
"stores":[
{
"name":"Centro Comercial Nuestro Urabá",
"address":"Carrera 99 # 84 - 18 <br> KM 1 Vía Carepa, Local 260",
"phone":"828 3482",
"horario":"Lunes a Jueves de 11:00 a.m. a 8:00 p.m. <br> Viernes - Sábado de 11:00 a.m. a 9:00 p.m. <br> Domingos - Festivos de 11:00 a.m. a 8:00 p.m.",
"point":" 7.872908, -76.634314 "
}
],
"name":"Apartadó - Antioquia ",
"point":"7.872908, -76.634314 "
},
"bello":{
"stores":[
{
"name":"Centro Comercial Puerta del Norte",
"address":"Autopista Nte. # 34-67. Local 1148",
"phone":"453 58 04",
"horario":"Lunes a Jueves de 11:00 a.m. a 8:00 p.m. <br> Viernes - Sábado de 11:00 a.m. a 9:00 p.m. <br> Domingo - Festivo 12:00 m. a 8:00 p.m.",
"point":"6.339606, -75.543569"
}
],
"name":"Bello - Antioquia ",
"point":"6.339606, -75.543569"
},
"bogota":{
"stores":[
{
"name":"Centro Comercial Salitre Plaza",
"address":"Centro Comercial Salitre Plaza Cra 68 B # 24 39. Local 206 A",
"phone":"744 13 15",
"horario":"Lunes a Sabado de 10:00 a.m. a 8:00 p.m. <br> Domingos - Festivos de 11:00 a.m. a 7:00 p.m. ",
"point":"4.653430, -74.109810"
},
{
"name":"Centro Comercial Gran Plaza Bosa",
"address":"Calle 65 Sur # 78 H 51, Local 224",
"phone":"749 9041",
"horario":"Lunes a Sábado de 10:00 am a 8:00 pm. <br> Domingos - Festivos de 11:00 am a 7:00 pm ",
"point":"4.604834, -74.184440"
},
{
"name":"Centro comercial Gran Plaza El Ensueño",
"address":"Calle 59 sur # 51-21. Local 128",
"phone":"745 74 89",
"horario":"Lunes a Sábado de 10:00 am a 8:00 pm. <br> Domingos - Festivos de 11:00 am a 7:00 pm ",
"point":"4.5822393, -74.1588988"
}
],
"name":"Bogotá",
"point":"4.653430, -74.109810"
},
"soacha":{
"stores":[
{
"name":"Centro Comercial Mercurio",
"address":"Centro Comercial Mercurio Cra. 7 # 31-35. Local 229",
"phone":"905 39 96",
"horario":"Lunes a Sábado de 10:00 am a 8:00 pm. <br> Domingos - Festivos de 11:00 am a 7:00 pm",
"point":"4.5877591, -74.2054374"
}
],
"name":"Soacha - Cundinamarca ",
"point":"4.585457, -74.211976"
},
"envigado":{
"stores":[
{
"name":"Sector Parque",
"address":"Carrera 43 # 36 Sur-80 <br> Ed. Aventino Local 5",
"phone":"270 1377",
"horario":"Lunes a Viernes de 9:00 am a 7:00 pm. <br> Sábados de 9:00 am a 6:00 pm",
"point":"6.171062, -75.586338 "
}
],
"name":"Envigado - Antioquia",
"point":"6.171062, -75.586338"
},
"itagui":{
"stores":[
{
"name":"Sector Parque",
"address":"Carrera 49 # 49 - 44 ",
"phone":"373 7293",
"horario":"Lunes a Sábado de 9:00 a.m. a 7:00 p.m. ",
"point":" 6.170904, -75.609691 "
}
],
"name":"Itagüí - Antioquia",
"point":"6.170904, -75.609691"
},
"medellin":{
"stores":[
{
"name":"Centro Comercial Macro",
"address":"Calle 44 # 66 - 27 San Juan",
"phone":"230 33 45",
"horario":"Lunes a Viernes de 8:30 a 6 pm <br>Sábado de 9 am a 5:00 pm",
"point":"6.2493106, -75.585921"
},
{
"name":"Centro Comercial Camino Real",
"address":"Piso 2, Local 224",
"phone":"512 71 31",
"horario":"Lunes a Sábado de 9:30 a.m. a 7:00 p.m.",
"point":"6.249993, -75.564724"
},
{
"name":"Centro Comercial Florida",
"address":"Piso 2, Local 1121",
"phone":"419 78 27",
"horario":"Lunes a Sábado de 11:00 a.m. a 7:00 p.m. <br> Domingo - Festivo 11:00 p.m. a 6:00 p.m. ",
"point":"6.270857, -75.577135"
},
{
"name":"Centro Comercial Premium Plaza",
"address":"Centro Comercial Premium Plaza, Piso 1, Local 1235",
"phone":"228 00 10",
"horario":"Lunes a Jueves de 10:00 a.m. a 8:00 p.m. <br> Viernes - Sábado de 10:00 a.m. a 9:00 p.m. <br> Domingo - Festivo 11:00 a.m. a 7:00 p.m. ",
"point":"6.229307, -75.570569"
},
{
"name":"Centro Comercial Los Molinos",
"address":"Local 2014",
"phone":"235 7253",
"horario":"Lunes a Sábado de 11:00 a.m. a 7:00 p.m. <br> Domingo - Festivo 11:00 a.m. a 6:00 p.m. ",
"point":"6.233277, -75.604169"
},
{
"name":"Centro Comercial Santa Fé",
"address":"Piso 3, Local 3082",
"phone":"321 29 82",
"horario":"Lunes a Sábado de 11:00 a.m. a 7:00 p.m. <br> Domingo - Festivo 11:00 a.m. a 6:00 p.m. ",
"point":"6.196528, -75.573876"
},
{
"name":"Centro Comercial La Central",
"address":"Piso 3, Local 331",
"phone":"479 77 05",
"horario":"Lunes a Sábado de 11:00 a.m. a 7:00 p.m. <br> Domingos - Festivos de 12:00 m. a 7:00 p.m. ",
"point":"6.238905, -75.547871"
},
{
"name":"Centro Comercial Arkadia",
"address":"Piso 3, Local 0389",
"phone":"557 43 85",
"horario":"Lunes a Sábado de 11:00 am a 7:00 pm. <br> Domingos - Festivos 11:00 am a 6:00 pm",
"point":"6.212797, -75.5945291"
},
{
"name":"Centro Comercial Unicentro",
"address":"Centro Comercial Unicentro Medellín / Piso 1 / Local 121",
"phone":"557 94 38",
"horario":"Lunes a Sábado de 10:00 am a 9:00 pm. <br> Domingos - Festivos de 11:00 am a 8:00 pm",
"point":"6.240914, -75.587134"
},
{
"name":"Outlet Guayabal",
"address":"Calle 25 # 52-110",
"phone":"265 61 53",
"horario":"Lunes a Viernes de 8:00 a.m. a 5:30 p.m. <br> Sábados de 8:00 a.m. a 12:00 m. ",
"point":"6.226413, -75.579432"
},
{
"name":"San Juan",
"address":"Calle 44 # 66-27 San Juan",
"phone":"230 33 45",
"horario":"Lunes a Viernes de 8:30 a.m. a 6:00 p.m. <br> Sábado de 9:00 a.m. a 5:00 p.m. ",
"point":"6.249519, -75.586033"
}
],
"name":"Medellín",
"point":"6.247282,-75.578494"
},
"palmira":{
"stores":[
{
"name":"Centro Comercial Llanogrande Plaza",
"address":"Calle 31 # 44-239, Local 212",
"phone":"286 9494",
"horario":"Lunes a Sábado de 10:00 a.m. a 8:00 p.m. <br> Domingo - Festivos de 11:00 a.m. a 7:00 p.m.",
"point":"3.528356, -76.316828"
}
],
"name":"Palmira - Valle",
"point":" 3.528356, -76.316828 "
},
"rionegro":{
"stores":[
{
"name":"Rionegro",
"address":"Carrera 51 # 48-18",
"phone":"562 1835",
"horario":"Lunes a Sábado de 9:00 a.m. a 6:00 p.m. ",
"point":" 6.152445, -75.374808 "
}
],
"name":"Rionegro - Antioquia",
"point":" 6.152445, -75.374808 "
},
"sabaneta":{
"stores":[
{
"name":"Centro Comercial Mayorca",
"address":"Cl. 51 Sur # 48-57. <br> Etapa 1, Local 2209 ",
"phone":"377 32 09",
"horario":"Lunes a Sábado de 11:00 am a 7:00 pm. <br> Domingo - Festivo 11:00 am a 6:00 pm ",
"point":"6.160630, -75.604707"
}
],
"name":"Sabaneta - Antioquia",
"point":"6.160630, -75.604707"
},
"soledad":{
"stores":[
{
"name":"Centro Comercial Carnaval",
"address":"Calle 30 #13-65 <br> Autopista Aeropuerto. Local 1327",
"phone":"305 93 65",
"horario":"Lunes a Viernes de 10:00 am a 8:00 pm. <br> Sábado de 10:00 am a 9:00 pm. <br> Domingo - Festivos de 11:00 am a 8:00 pm",
"point":"10.907799, -74.771031"
}
],
"name":"Soledad - Atlántico",
"point":"10.907734, -74.771039"
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment