Detect event in Google Marker - javascript

In my code, how can I get the name of the User that someone clicked on in the marker?
Currently my code has:
function createMarker(point, user, studytopic) {
var marker = new GMarker(point);
var currUser = user;
var html = '<b>' + user + '</b> <br/>' + studytopic + '<br/>' +
' Contact ' + user + '' ;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
currUser is a global field, however, it's not updated every time I click on a different marker in Google maps.
Basically what I'm looking for is a event to fire when a link (id=contactSBLink) within any marker is clicked. I want it to get the Username(which is a link) to pass the user variable to another function.
I'm not sure what's the best way to go about to get this?

You can pass the user u to the javascript:showContactSB(u). This is an exercise in setting quotes properly:
var u = "'" + user + "'";
var html = '<b>' + user + '</b> <br/>' + studytopic + '<br/>' +
' Contact ' + user + '' ;
Now, you get the user in the click-function:
function showContactSB(user) {
alert("Hi " + user);
}
BTW, I would recommend you to upgrade to Google Maps v3.

Related

How to display image in popup

I have got a csv file which contain all attributes, such as name, image url, price of every restaurant in London. I use the code below to display popup when my mouse moves to the point of the restaurant in map. However, it can only show the image url text but not the image itself. Is that possible to make the popup display the image of every restaurant directly by changing the code below?
var mypopup = new mapboxgl.Popup({closeButton: false});
map.on('mouseover', 'Restaurant', function (e) {
mypopup
.setLngLat(e.features[0].geometry.coordinates)
.setHTML("<h3>" + e.features[0].properties.name + "</h3>Categories: " + e.features[0].properties.categories + "<br />Image Url: " + e.features[0].properties.image_url + "<br />Location: " + e.features[0].properties.location + "<br />Phone Number: " + e.features[0].properties.display_phone + "<br />Price: " + e.features[0].properties.price + "<br />Rating: " + e.features[0].properties.rating)
.addTo(map);
});
map.on('mouseenter', 'Food', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'Food', function () {
map.getCanvas().style.cursor = '';
mypopup.remove();
});
You need to wrap the image url in and img html element e.g. <img src="e.features[0].properties.image_url" />. You may have to do some styling if you want them all the same size, for instance.

Need help creating clickable url link for google map's infowindow

I'm unable to create a clickable url link for Google Map's infowindow. I'm sure it's a syntax error, just not sure where exactly.
Here's a snippet of my code
var marker = new google.maps.Marker({
map: map,
title: eventName,
position: loc
});
var content =
"<strong>" + "#location.venue_name" + "</strong><br>" +
"#location.venue_address" + " " + "#location.city_name" + "<br>" +
"#location.description" + "<br>" +
"#location.url" + "<br>" + //displays url eg. 'www.google.com'
//"More Details<br>"; // map won't show if this line is uncommented
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function (marker, content) {
return function () {
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, content));
Thank you in advance
Please try this one:
var content =
"<strong>" + "#location.venue_name" + "</strong><br>" +
"#location.venue_address" + " " + "#location.city_name" + "<br>" +
"#location.description" + "</div>" +
"#location.url" + "<br>" +
"<a href='" + "#location.url" + "' target='_blank'>More Details</a><br>";
Notice I have changed quotes a little bit in the last line. Hope it helps
preferably in one single string :
"<a href='#location.url' target='_blank'>More Details</a><br>"
thats easier for the eyes
pretty sure the #... injections works in longer strings as well
syntax got a bit messy there on content variable.
change your line as follows
<a href='" + "#location.url" + "' target='_blank'>More Details</a><br>"
also take a look at template literals for js which will make you code much more readable with a "`" (backtick)
var content = `<strong>${#location.venue_name}</strong>
<br>
${#location.venue_address} ${#location.city_name} ${#location.url}
<a href='${#location.url}' target='_blank'>More details</a>
`
this way you can avoid a lot of mess trying to build a string. ${} will allow you to put Js variables inside a backticked string.

What is wrong with my foursquare api call?

The live example is here
http://kenziejoy.github.io/frontend-nanodegree-map/
I'm trying to pull data about locations that I have hard coded in an array - either by their foursquare id (didn't seem to be working) or their lat and lng. (client ID and secret are variables I just haven't shown them here)
I don't need any other functionality than just pulling data from their database to display on a map so I thought it would fall under the userless access but it is giving me an error that the request are bad because I don't have the proper authentication.
Thanks in advance
From the foursquare site
"Userless access
Some of our endpoints that don’t pertain to specific user information, such as venues search are enabled for userless access (meaning you don’t need to have a user auth your app for access). To make a userless request, specify your consumer key's Client ID and Secret instead of an auth token in the request URL.
https://api.foursquare.com/v2/venues/search?ll=40.7,-74&client_id=CLIENT_ID&client_secret=CLIENT_SECRET&v=YYYYMMDD
To see what level of permissions each endpoint needs, check out the filters at the top of our endpoints page."
/**********FourSquare***************/
$.ajax({
url:'https://api.foursquare.com/v2/venues/search',
dataType: 'json',
data: 'limit=1' +
'&ll='+ placeItem.lat() +','+ placeItem.lng() +
'&?client_id='+ CLIENT_ID +
'&client_secret='+ CLIENT_SECRET +
'&v=20140806' +
'&m=foursquare',
async: true,
success: function (data) {
var result = data.response.venue;
var contact = result.hasOwnProperty('contact') ? result.contact : '';
if (contact.hasOwnProperty('formattedPhone')) {
placeItem.phone(contact.formattedPhone || '');
}
var location = result.hasOwnProperty('location') ? result.location : '';
if (location.hasOwnProperty('address')) {
placeItem.address(location.address || '');
}
var bestPhoto = result.hasOwnProperty('bestPhoto') ? result.bestPhoto : '';
if (bestPhoto.hasOwnProperty('prefix')) {
placeItem.photoPrefix(bestPhoto.prefix || '');
}
if (bestPhoto.hasOwnProperty('suffix')) {
placeItem.photoSuffix(bestPhoto.suffix || '');
}
var description = result.hasOwnProperty('description') ? result.description : '';
placeItem.description(description || '');
var rating = result.hasOwnProperty('rating') ? result.rating : '';
placeItem.rating(rating || 'none');
var url = result.hasOwnProperty('url') ? result.url : '';
placeItem.url(url || '');
placeItem.canonicalUrl(result.canonicalUrl);
// Infowindow code is in the success function so that the error message
// Content of the infowindow
var contentString = '<div id="iWindow"><h4>' + placeItem.name() + '</h4><div id="pic"><img src="' +
placeItem.photoPrefix() + '110x110' + placeItem.photoSuffix() +
'" alt="Image Location"></div><p>Information from Foursquare:</p><p>' +
placeItem.phone() + '</p><p>' + placeItem.address() + '</p><p>' +
placeItem.description() + '</p><p>Rating: ' + placeItem.rating() +
'</p><p><a href=' + placeItem.url() + '>' + placeItem.url() +
'</a></p><p><a target="_blank" href=' + placeItem.canonicalUrl() +
'>Foursquare Page</a></p><p><a target="_blank" href=https://www.google.com/maps/dir/Current+Location/' +
placeItem.lat() + ',' + placeItem.lng() + '>Directions</a></p></div>';
// Add infowindows
google.maps.event.addListener(placeItem.marker, 'click', function () {
infowindow.open(map, this);
// Bounce animation
placeItem.marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function () {
placeItem.marker.setAnimation(null);
}, 800);
infowindow.setContent(contentString);
});
},
// Alert the user on error.
error: function (e) {
infowindow.setContent('<h5>Foursquare data is unavailable.</h5>');
document.getElementById("error").innerHTML = "<h4>Foursquare data is unavailable. Please try refreshing.</h4>";
}
});
I took a look at the live example URL and you were getting a lot of bad request errors in the JavaScript console in Chrome.
Looking at these, you had a bad URL, you were using:
https://api.foursquare.com/v2/venues/search?limit=1&ll=45.5589522,-122.6517163&?client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&v=20140806&m=foursquare
The problem seems to be that you have:
&?client_id
which makes the URL invalid.
Changing this to
&client_id
fixes this and I then see data coming back from Foursquare.

Clicking on an element to reveal additional .get information

I'm trying to work through the 2nd question on this set of problems. I have to be able to click on a legislator's name and have additional information about him/her show up. Here's what I have so far.
$(function() {
$("form#get-zip").submit(function() {
var zip = $("input#zip").val();
$.get("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip, function(responseText) {
responseText.results.forEach(function(legislator) {
$("ul#legislators").append("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "</li>");
$("li").click(function() {
$(this).append("<p>Party: " + legislator.party + ", District: " + legislator.district + "</p>");
});
});
});
return false;
});
});
The problem is that when I click on a legislator's name it reveals information about all the legislators in the list rather than the particular legislator I clicked on. This is my first experience with A.P.I.s and I'm very much still a novice programmer. I'm finding all these moving parts to be very mentally exhausting. So I really appreciate any help I can get with this. Thanks.
I would suggest building out all your html on submit, even the details that appear below each legislator. Then hide all that extra detail. And set up the function of your li's to show the relative details.
$(function() {
$("form#get-zip").submit(
function() {
var zip = $("input#zip").val();
$.getJSON("http://congress.api.sunlightfoundation.com/legislators/locate?apikey=191e116b2a244fb48c5028e8f370488b&zip=" + zip,
function(responseText) {
$.each(responseText.results,
function(i,legislator) {
var newEl = $("<li>" + " " + legislator.first_name + " " + legislator.last_name + " (" + legislator.chamber + ")" + "<p>Party: " + legislator.party + ", District: " + legislator.district + "</p></li>");
newEl.appendTo("ul#legislators");
$("ul#legislators li").last().find("p").hide(); // hide the last added one
}); // end each
}); // end get function
}); // end submit function
$("ul#legislators").on("click", "li",
function() {
var details = $(this).find("p");
if (details.is(":visible")) {
details.hide();
} else {
details.show();
}
}); // end click function
}); // end document ready function
When the click event fires, the legislator variable no longer contains the data you looking for.

google api not working for geolocation

i have found a script for geolocation resolve with google
in this code there is a key that is 86 char long
i have opened a google api key for the gmail of the website
it is a short key (only 39 chars)
i then changed the key and run the code.
i get the resolve country location that i need.
i then tried from another ip location (at home) and one with a proxy sever and didn't get any thing
i'm not sure if the api key i'm using is set for public or not- how do i check that?
do i have to pay for using it or can be used only with the free 25,000 request per day?
the code i have tried is:
<script type="text/javascript" src="http://www.google.com/jsapi?key="></script>
<script type="text/javascript">
function geoTest() {
if (google.loader.ClientLocation) {
var latitude = google.loader.ClientLocation.latitude;
var longitude = google.loader.ClientLocation.longitude;
var city = google.loader.ClientLocation.address.city;
var country = google.loader.ClientLocation.address.country;
var country_code = google.loader.ClientLocation.address.country_code;
var region = google.loader.ClientLocation.address.region;
var text = 'Your Location<br /><br />Latitude: ' + latitude + '<br />Longitude: ' + longitude + '<br />City: ' + city + '<br />Country: ' + country + '<br />Country Code: ' + country_code + '<br />Region: ' + region;
} else {
var text = 'Google was not able to detect your location';
}
document.write(text);
}
geoTest();
</script>
Seems like the geolocation is not reliable
See Philippe's answer here Is google.loader.clientlocation still supported

Categories

Resources