Created
September 28, 2017 13:07
-
-
Save marcelomunozr/800255eb463c7b4c83f1b6e8d4dfdec5 to your computer and use it in GitHub Desktop.
Maps API with Geolocation, center on click my location, and various markers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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