I'm using the Google Maps and places API. I'm trying to have the map show current location WITH surrounding restaurants, cafes, and bars. At this point the map loads and the geolocation is working. I can't seem to get the place markers to show up. I have no idea what I'm missing as I'm learning javascript as quickly as possible.
Any help would be very much appreciated. Thank You!
Here is my current code:
<script>
var map;
var service;
var marker;
var pos;
var infowindow;
function initialize()
{
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
panControl: false,
streetViewControl: false,
mapTypeControl: false,
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//HTML5 geolocation
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position)
{
pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
infowindow = new google.maps.InfoWindow({map: map,position: pos,content: 'You Are Here'});
var request = {location:pos,radius:500,types: ['restaurant, cafe, bars']};
map.setCenter(pos);
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request,callback);
},
function()
{
handleNoGeolocation(true);
});
}
else
{
handleNoGeolocation(false);
}
function callback(results, status)
{
if (status == google.maps.places.PlacesServiceStatus.OK)
{
for (var i = 0; i < results.length; i++)
{
createMarker(results[i]);
}
}
}
function createMarker(place)
{
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function()
{
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Check that your script call to the Google API includes a reference to the places library. For example:
<script src="http://maps.googleapis.com/maps/api/js?key=yourAPIkey&libraries=geometry,places&sensor=true&language=en"></script>
In this line of code:
var request = {location:pos,radius:500,types: ['restaurant, cafe, bars']};
instead of types: write keyword:
Related
I have created an application that allows a user to plot a flag on google maps upon a click event although once the page is refreshed all of flags are lost. I want to be able to keep the data the user has input using local storage, can anyone point me in a direction or show me sample code of how they would handle this problem? thanks.
Basic google maps code without local storage
var map;
var myCenter=new google.maps.LatLng(54.906435, -1.383944);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
//creating the event for placing the marker
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
//Funcion to place the marker on the map (flag)
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
icon:'flag.png',
map: map,
});
//open information window once marker is placed
var infowindow = new google.maps.InfoWindow({
content: 'User has placed warning'
});
infowindow.open(map,marker);
//zoom into the marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(17);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
This should do the trick ;)
function initialize()
{
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
//creating the event for placing the marker
google.maps.event.addListener(map, 'click', function(event) {
writeToStorage(event.latLng);
placeMarker(event.latLng);
});
setupStorage();
readFromStorage();
}
function setupStorage() {
if(typeof(localStorage) === "undefined") {
// If localStorage isn't supported, fake it.
// Won't persist between sessions.
localStorage = {};
}
localStorage.locations = localStorage.locations || [];
}
function writeToStorage(location) {
localStorage.locations.push(location);
}
function readFromStorage() {
localStorage.locations.forEach(function(location) {
placeMarker(location);
});
}
//Funcion to place the marker on the map (flag)
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
icon:'flag.png',
map: map,
});
//open information window once marker is placed
var infowindow = new google.maps.InfoWindow({
content: 'User has placed warning'
});
infowindow.open(map,marker);
//zoom into the marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(17);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Let me know if you have any trouble understanding any of it.
var map = {};
var polyOptions = {};
$(document).ready(function () {
map = new google.maps.Map(document.getElementById('MapDiagram'), {
zoom: 5.4,
center: new google.maps.LatLng(40, -10),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
});
polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true
};
});
map.setCenter(new google.maps.LatLng(coord1, coord2));
I embed custom google map to my homepage (under contact) - but how to set the marker on the map and map itself on the right place?
addition to html was:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="map.js"></script>
and js code is:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
In initialize function you need add var marker variable. Below is simple example to set marker on map when click. Hope this help
function initializeMap() {
var options = {
center: new google.maps.LatLng(21.1569, 106.113),
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'), options);
directionsDisplay = new google.maps.DirectionsRenderer();
infoWindow = new google.maps.InfoWindow();
marker = new google.maps.Marker();
directionsDisplay.setMap(map);
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
geocoder.geocode({latLng : location}, function(response, status){
if (status == google.maps.GeocoderStatus.OK) {
console.log(response);
if (response[0]) {
marker.setMap(map);
marker.setPosition(location);
infoWindow.setContent(response[0].formatted_address);
infoWindow.open(map, marker);
}
}
});
}
I'm wondering if it's possible to get Instagram photo's to Google Maps working with API's. So far I got Google Maps working and it's showing my current location, along with a radius of 1km around me.
The thing I want to do is show a certain amount of Instagram pictures in that radius around me, taken by everybody.
But so far, I got no idea where or how to start, and if it's even possible.
The code for my google maps is:
</script>
<script type="text/javascript">
var map;
var service;
var marker;
var pos;
var infowindow;
function initialize() {
var mapOptions = {
zoom: 14
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//HTML5 geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'This is your current position!'
});
var circle = new google.maps.Circle({
map: map,
position: pos,
radius: 1000, // 1km in metres
fillColor: '#6D86D1'
});
circle.bindTo('center', infowindow, 'position');
map.setCenter(pos);
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
},
function () {
handleNoGeolocation(true);
});
} else {
handleNoGeolocation(false);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
You have to use the media/search API to get photos around a location (lat/lng) and distance:
https://api.instagram.com/v1/media/search?lat=48.858844&lng=2.294351&distance=1000&access_token=ACCESS-TOKEN
Here is an implementation of getting instagram photos around any radius on google maps:
http://www.gramfeed.com/instagram/map
i got this code but it appears when the map load, i need that by clicking in a button to hide and show the search result, can an1 help please ?
code:
var map;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: 500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);\
EDIT
I trying to create a button that when clicked shows the search result of google places .. I hid the maker and made a function to the button show the marker, but this is not working out
function createMarker(place) {
var placeLoc = place.geometry.location;
var markersr = new google.maps.Marker({
map: map,
icon:icon2,
visible:false,
position: place.geometry.location,
});
function
function showsearch() {
markersr.setVisible(true);
}
button
<input type="checkbox" name="btn2" onClick="showsearch()" class="btn2" >
Please refer the link. http://jsfiddle.net/y829C/1/
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Update:
Refer the link:http://jsfiddle.net/y829C/11/
Hey I'm new to the google maps api, and I have an embedded map, i'm using geolocation to get the users lat and long, and i'm then filling in the gaps in the maps api. The map, however doesn't work when I use the generated lat and long, but does work if i just type one in
Non-working code:
var map;
var infowindow;
function initialize() {
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
function showPosition(position)
{
var latlon = new google.maps.LatLng( position.coords.latitude + "," + position.coords.longitude );
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlon,
zoom: 15,
disableDefaultUI: true
});
var request = {
location: latlon,
radius: 555,
types: ['bar']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
alert(place.name);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Working code
var map;
var infowindow;
function initialize() {
var latlon = new google.maps.LatLng(-33.8665433, 151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlon,
zoom: 15,
disableDefaultUI: true
});
var request = {
location: latlon,
radius: 555,
types: ['bar']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
alert(place.name);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Any help if appreciated :)
Replace your line:
var latlon = new google.maps.LatLng
(position.coords.latitude + "," + position.coords.longitude);
with
var latlon = new google.maps.LatLng
(position.coords.latitude, position.coords.longitude);
The problem is in concatenating two values into one where constructor expects two parameters.