Eu tenho este código a baixo com a API do Google Maps usando vários lugares definidos dentro do Javascript. O meu problema é que tenho mais lojas para adicionar e são espalhadas por todo o Estado, então quero que quando o usuário abrir a página, pegue sua localização e coloque ela dentro da página, para que ele possa ver as lojas proximas.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPFf086alCsl076VnHe4ap3nEgCx4hZvU&libraries=places"></script>
<section class="breadcrumb">
<div class="container">
<ul>
<li><a href=""><i class="fa fa-home"></i></a>
<li>
<a href="{{asset('lojas')}}" target="_self">
Lojas </a>
</li>
</ul>
</div>
</section>
<div class="container">
<h1 class="v1">Encontre a loja mais perto de você</h1>
</div>
<section class="conteudo-texto">
<div class="container">
<div id="map" style="height: 400px; width: 100%;"> <!-- onde o mapa vai aparecer-->
</div>
<script type="text/javascript">
var locations = [ // definição de todas as lojas
['<div>'+
'<h2 class="firstHeading"><b>Design Persianas<b/></h2>'+
'<div id="bodyContent">'+
'<p>Rua Hermes Pacheco, 1117 <br/> Hípica <br/> Porto Alegre <br/> 51 - 3352.4277</p>'+
'</div>'+
'</div>', -30.1669899,-51.2017468,17],
['<div id="content">'+
'<div>'+
'</div>'+
'<h2 class="firstHeading"><b>Maison Decor<b/></h2>'+
'<div id="bodyContent">'+
'<p>Av. Pereira Passos, 1152 <br/> Cristal <br/> Porto Alegre <br/> 51 - 3265.4800</p>'+
'</div>'+
'</div>', -30.1034039,-51.2551846,17],
['<div>'+
'<h2 class="firstHeading"><b>Soleil Persianas<b/></h2>'+
'<div id="bodyContent">'+
'<p>Rua Selso Maffessoni, 70 <br/> Aberta dos Morros <br/> Porto Alegre <br/> 51 - 3246.7685</p>'+
'</div>'+
'</div>', -30.1354365,-51.2165426,17],
['<div>'+
'<h2 class="firstHeading"><b>Decorações Berti<b/></h2>'+
'<div id="bodyContent">'+
'<p>Rua Lima e Silva, 837 <br/> Cidade Baixa <br/> Porto Alegre <br/> 51 - 3226.6468</p>'+
'</div>'+
'</div>', -30.0399515,-51.2218371,17],
['<div>'+
'<h2 class="firstHeading"><b>Cortinas Berti<b/></h2>'+
'<div id="bodyContent">'+
'<p>Av. Cristiano Fischer, 776 <br/> Bom Jesus <br/> Porto Alegre <br/> 51 - 3334.6881</p>'+
'</div>'+
'</div>', -30.0463707,-51.1741466,17],
['<div>'+
'<h2 class="firstHeading"><b>Claudia Cortinas<b/></h2>'+
'<div id="bodyContent">'+
'<p>Av. Protasio Alves, 2038 <br/> Petropolis <br/> Porto Alegre <br/> 51 - 3024.4792</p>'+
'</div>'+
'</div>', -30.042944,-51.1909027,17],
['<div>'+
'<h2 class="firstHeading"><b>Porto Windows <b/></h2>'+
'<div id="bodyContent">'+
'<p>Rua Silva Jardim, 78 <br/> Auxiliadora <br/> Porto Alegre <br/> 51 - 3028.7788</p>'+
'</div>'+
'</div>', -30.0228021,-51.1925731,17],
['<div>'+
'<h2 class="firstHeading"><b>Casa Bonita<b/></h2>'+
'<div id="bodyContent">'+
'<p>Rua Eudoro Berlink, 888 <br/> Auxiliadora <br/> Porto Alegre <br/> 51 - 3332.5627</p>'+
'</div>'+
'</div>', -30.0239334,-51.1907752,17],
['<div>'+
'<h2 class="firstHeading"><b>Casa das Redes<b/></h2>'+
'<div id="bodyContent">'+
'<p>Rua Felipe Camarão, 469 loja 104 <br/> Bom Fim <br/> Porto Alegre <br/> 51 - 3312.1824</p>'+
'</div>'+
'</div>', -30.033244,-51.2120567,17],
['<div>'+
'<h2 class="firstHeading"><b>Casa Rezende<b/></h2>'+
'<div id="bodyContent">'+
'<p>Rua Daltro Filho, 1130 <br/> Boa Vista <br/> Alegrete <br/> 55 - 3422.3386</p>'+
'</div>'+
'</div>', -29.7878098,-55.8041166,17],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10, // zoom padrão
center: new google.maps.LatLng(-30.0575488,-51.247716,9.46), // inicio do zoom - AQUI QUE PRECISO MUDAR
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow(); //mostra as informações escritas
var marker, i;
for (i = 0; i < locations.length; i++) { // lista todos os lugares
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script> </div>
</section>