Good afternoon everyone!
I'm developing a system, but I need to use Geolocation to get the location of the user, and show the points close to him, so long, but when I put a marker in another state, it zooms too wide to pick up all markers, I would like it to be centered and zoomed in at a maximum of 15 from my current position. It would be like that. Thanks in advance
var locations = [
['Estádio Mineirão', 'Av. Antônio Abrahão Caran, 1001 - São José, Belo Horizonte - MG, 31275-000, Brasil'],
['Estádio Independência', 'R. Pitangui, 3230 - Horto, Belo Horizonte - MG, 31110-732, Brasil', '#'],
['Estádio Maracanã', 'Av. Pres. Castelo Branco, s/n - Maracanã, Rio de Janeiro - RJ, 20271-130, Brasil', '#'],
['Arena da Baixada', 'R. Buenos Aires, 1260 - Água Verde, Curitiba - PR, 80250-070, Brasil', '#']
];
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng("-19.94370498", "-44.0317787"),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
geocoder = new google.maps.Geocoder();
for (i = 0; i < locations.length; i++) {
geocodeAddress(locations, i);
}
}
google.maps.event.addDomListener(window, "load", initialize);
function geocodeAddress(locations, i) {
var title = locations[i][0];
var address = locations[i][1];
var url = locations[i][2];
geocoder.geocode({
'address': locations[i][1]
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
icon: 'http://upcomunicacaovisual.com.br/modelos/imagem/up.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
}
function infoWindow(marker, map, title, address, url) {
google.maps.event.addListener(marker, 'click', function () {
var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>Ver Perfil</a></p></div>";
iw = new google.maps.InfoWindow({
content: html,
maxWidth: 350
});
iw.open(map, marker);
});
}
function createMarker(results) {
var marker = new google.maps.Marker({
icon: 'http://upcomunicacaovisual.com.br/modelos/imagem/up.png',
map: map,
position: results[0].geometry.location,
title: title,
animation: google.maps.Animation.DROP,
address: address,
url: url
})
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
infoWindow(marker, map, title, address, url);
return marker;
} html{ margin:0; padding:0; height:100%; width:100%}
body{ margin:0; padding:0; height:100%; width:100%}
#map_canvas { height: 100%; width: 100%; }<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script><scriptsrc="teste.js" type="text/javascript"></script>
<div id="map_canvas" ></div>