Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Maps API with Geolocation, center on click my location, and various markers
var locations = [
[
"Location 1",
"Bandera Esquina Agustinas",
"-33.4408767",
"-70.6521545"
],
[
"Location 2",
"Av. libertador bernardo O'higgins 3390",
"-33.4517146",
"-70.6811136"
],
[
"Location 3",
"Compañía 2305",
"-33.43924860000001",
"-70.6627823"
]
];
var geocoder = new google.maps.Geocoder();
var map;
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
function initialize() {
map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 5,
disableDefaultUI: true,
zoomControl: true,
scrollwheel: false,
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: 'assets/img/map-pine.png',
map: map,
position: results[0].geometry.location,
title: title,
address: address,
url: url,
animation: google.maps.Animation.DROP
});
infoWindow(marker, map, title, address, url);
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
} else {
alert("geocode of " + address + " failed:" + status);
}
});
geoLocate();
}
function infoWindow(marker, map, title, address, url, type) {
google.maps.event.addListener(marker, 'click', function() {
var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
iw = new google.maps.InfoWindow({
content: html,
maxWidth: 350
});
iw.open(map, marker);
});
}
function createMarker(results, html, type) {
var marker = new google.maps.Marker({
icon: type && type == 'here' ? 'assets/img/blue-marker-geolocation.png' : 'assets/img/map-pine.png',
map: map,
position: results,
title: geocodeAddress.title,
address: geocodeAddress.address,
url: geocodeAddress.url,
animation: google.maps.Animation.DROP
});
bounds.extend(marker.getPosition());
map.fitBounds(bounds);
map.setCenter(results);
//zoom on click marker
marker.addListener('click', function() {
// map.setZoom(16);
map.setCenter(marker.getPosition());
});
if (type != 'here')
infoWindow(marker, map, geocodeAddress.title, geocodeAddress.address, geocodeAddress.url, type);
return marker;
}
// geolocation
function geoLocate() {
if (navigator.geolocation) {
// console.log(markers);
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
'lat': position.coords.latitude,
'lng': position.coords.longitude
};
map.setCenter(pos);
// console.log(position);
createMarker(new google.maps.LatLng(pos), '', 'here');
}, function() {
handleLocationError(true, infowindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infowindow, map.getCenter());
}
}
// get actual location
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
$(document).ready(function() {
$('#geoLocate').on('click', function() {
$('#searchInput').attr('placeholder', 'Buscando ubicación...')
console.log(geoLocate());
geoLocate();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment