I hope someone can help with what is probably a fairly simple query. I have seen a question on here about trying to do this without a mouseclick, but I want to add an event listener to the markers on the Fusion Table map that will load the infoWindow content in a separate div below the map. So far I have suppressed the infoWindow, but I'm a bit lost on the next step of adding the click, retrieving the data relevant to that marker and loading into the div.
The marker display is limited to markers within a set radius of the user's location, in order to reduce load time.
I'm assuming I need to start with something like this:
google.maps.event.addListener(layer, 'click', function() {
I'd be grateful for any clues.
Here's the relevant bit of my code so far:
var tableid = '[ID]';
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: tableid,
where: 'ST_INTERSECTS(Location, CIRCLE(LATLNG'+marker.position+', 2000))'
},
options: {
suppressInfoWindows: true
}
});
var circle = new google.maps.Circle({
map: map,
radius: 2000,
fillOpacity: 0.1,
strokeOpacity: 0,
clickable: false
});
circle.bindTo('center', marker, 'position');
layer.setMap(map);
});
EDIT:
For everyone's amusement, this is what I've tried so far:
google.maps.event.addListener(layer, "click", function () {
$('#infoWindowDiv').append('new google.maps.infoWindowHtml');
});
It probably comes as a surprise ot no-one that it doesn't work. But hey, at least I'm trying! Thanks
EDIT 2:
I'm delighted to say I have found a solution that works - which I post here for anyone else who might have the same problem/goal:
google.maps.event.addListener(layer, "click", function (e) {
document.getElementById("infoWindowDiv").innerHTML = e.infoWindowHtml;
});
I'm delighted to say I have found a solution that works - which I post here for anyone else who might have the same problem/goal:
google.maps.event.addListener(layer, "click", function (e) {
document.getElementById("infoWindowDiv").innerHTML = e.infoWindowHtml;
});
Related
I would like you use select interaction to add a feature, but the e.coordinate shows undefined.
var select = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#0288D1',
width: 2
})
})
});
map.addInteraction(select);
select.on('select', function(e) {
var feat = new ol.Feature({
geometry: new ol.geom.Point(e.coordinate),
style: style1
});
alert(e.coordinate);
feat.setStyle(style1);
layerVector.getSource().addFeature(feat);
});
If someone know the reason, tell me how to get the coordinate when i click on viewer with this select interaction.
UPDATE
What you ask in comments (about listeners) can be easier if you become a friend of API Docs. In my beginning it was very hard to know them all, but the docs are much, much better so let it be your source.
Each part of OpenLayers has its own listeners, so, for instance, click at ol.Map, scroll to the "Fires:" section and you'll see the several listeners, the same with ol.View and so forth.
To get clicked coordinate inside ol.interaction.Select listener use:
select.on('select', function(evt){
var coord = evt.mapBrowserEvent.coordinate;
console.info(coord);
// ...
});
I have been trying to get leaflet.js maps working with my jquery mobile project. It sort of works but not at all what it should be. The map is not sized correctly and does not zoom in and out correctly.
I followed the docs here:
leafletjs.com
I also found this jsfiddle that works finding your geolocation:
jsfiddle
$(document).on('pageinit', '#index', function(){
var map = L.map('map');
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 16,
attribution: 'Example made by Gajotres'
}).addTo(map);
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 18});
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
});
I made two changes in the js code according to the docs is this jsfiddle. It is supposed to be a map of Puerto Vallarta Mexico. It sort of works but doesn't really.
my jsfiddle
$(document).ready(function() {
**// Changed this line**
var map = L.map('map').setView([20.602237, -105.236859],15); // Puerta Vallarta South Side
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 16,
attribution: 'Example made by Gajotres'
}).addTo(map);
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
**//Removed the below line**
//map.locate({setView: true, maxZoom: 18});
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
});
Edit
My jsfiddle now works in jsfiddle by replacing
$(document).on('pageinit', '#page_map_south_side', function(){
with
$(document).ready(function() {
However, this does not change anything in my actual code. I believe .on('pageinit') line just doesn't work in jsfiddle properly. So I am really back to square one.
I change the line to set the location to Puerto Vallarta and remove the geo location line of code.
Does anybody have any ideas why it's not working properly?
I was able get the maps working by initiating the map with
$(document).on('pageshow', '#page_map_south_side', function(){
You're initiating you map this way
$(document).on('pageinit', '#index', function(){})
Instead of this try initializing it this way
$(document).ready(function(){})
Here is working jsfiddle
Given this example here: http://jqueryui.com/selectable/#display-grid I would like to make a selection without the "selection box" that appears when you click 'n drag. Namely, when I click on number 5 and drag to number 6 and then to 10 I get this:
where in fact what i would like to is drag from 5 to 6 to 10 and have only them selected without 9.
I searched the docs and couldn't find that option, and my google skills didn't bring me any luck, and I thought this must have been already done it's just so happens I can't grasp it on my own or find an existing solution, so any help here is appreciated (not saying you should do the research for me, am just hoping someone dealt with this before so he can point me to the right direction).
It also could be I'm missing the point in trying to accomplish this with jquery UI but this was the first such example I found that fits (kind of) what I want to accomplish.
First, you might want to hide .ui-selectable-helper or change the CSS:
.ui-selectable-helper{display:none;}
Next, do something like this:
$(function() {
var _mousedown = false;
$('#selectable').selectable({
start: function(event,ui){
_mousedown=true;
},
stop: function(event,ui){
_mousedown=false;
$('.ui-selected').removeClass('ui-selected');
$('.selecting').addClass('ui-selected');
},
selecting: function(event,ui){
if($('.ui-selecting').length == 1)
$(ui.selecting).addClass('selecting');
$('.ui-selecting').removeClass('ui-selecting');
$('.selecting').addClass('ui-selecting');
},
unselecting: function(event,ui){
if($(ui.unselecting).hasClass('selecting'))
$(ui.unselecting).removeClass('selecting');
}
});
$('#selectable').on('mouseenter', '.ui-selectee', function(){
if(_mousedown)
$(this).addClass('selecting');
});
});
DEMO:
http://jsfiddle.net/dirtyd77/7UVNS/5/ (HELPER HIDDEN)
http://jsfiddle.net/dirtyd77/7UVNS/6/ (HELPER VISIBLE)
Let me know if you have any questions!
***UPDATE:***
.selectable() is not able to do what you are looking for. However, here is something I created. Hope it helps!
JAVASCRIPT:
$(function() {
var _mousedown = false,
_last=null;
$('#selectable li').mousedown(function(){
_mousedown = true;
$('.ui-selected').removeClass('ui-selected');
$('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
$(this).addClass('ui-selecting');
}).mouseup(function(){
_mousedown=false;
$('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
$('#selectable li').removeAttr('unselectable style');
}).mouseenter(function(){
if(_mousedown){
if($(this).hasClass('ui-selecting'))
$(_last).removeClass('ui-selecting');
$(this).addClass('ui-selecting')
}
}).mouseleave(function(){
if(_mousedown){
_last = $(this)[0];
$(this).addClass('ui-selecting');
}
});
});
DEMO:
http://jsfiddle.net/dirtyd77/7UVNS/9/
***UPDATE #2:***
If you want to use this on a mobile device, I recommend changing up the format entirely to avoid any possible pitfalls. Here is how I would go about it:
JAVASCRIPT:
$(function() {
var _clicked = false;
$('#btn_select').click(function(){
_clicked = false;
$(this).hide();
$('#selectable li').removeAttr('unselectable style');
$('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
});
$('#selectable li').click(function(){
if(!_clicked){
_clicked = true;
$('.ui-selected').removeClass('ui-selected');
$('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
$('#btn_select').show();
}
if($(this).hasClass('ui-selecting')){
$(this).removeClass('ui-selecting');
}else{
$(this).addClass('ui-selecting');
}
});
});
*NOTE: you might want a $('body').click() to act as the end_selection button.
DEMO:
http://jsfiddle.net/dirtyd77/7UVNS/13/
This doesn't answer the original question, but it does show how to access the helper div of the selectable widget.
var helper = $( "#selectable" ).selectable('widget').data().uiSelectable.helper;
helper.css( { border:'none' } );
Could really do with some help, I'm trying to push an alert on an android phone with the help of sencha when a user is near a certain set point of interest.
In my view I have a map
{
xtype: 'map',
id: 'mapOne',
cls: 'center',
flex: 1,
width: '100%',
mapOptions : {
mapTypeControl : false,
navigationControl : true,
streetViewControl : false,
backgroundColor: 'transparent',
disableDoubleClickZoom: true,
zoom: 10,
draggable: true,
keyboardShortcuts: true,
scrollwheel: false,
enableHighAccuracy: true
},
listeners : {
maprender : function(comp, map){
var currentMarker = new google.maps.Marker({
position: new google.maps.LatLng(setlat,setlon),
//title : 'Sencha HQ',
map: map,
icon: image
});
setTimeout( function(){map.panTo (new google.maps.LatLng(markerlat, markerlong));} , 1);
}
}
In my controller I set the following before my map is rendered
var poi = new google.maps.LatLng(markerlat, markerlong);
Then in my controller im initalizing a geolocation object as follows
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
frequency :3000,//every 3 seconds
listeners: {
locationupdate: function(geo) {
var curlat = geo.position.coords.latitude;
var curlong = geo.position.coords.longitude;
console.log('New GEO CURRENT: ' + curlat + ' ' + curlong);
var me = new google.maps.LatLng(curlat, curlong);
if (me == poi){
alert("poi found");
}
},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout){
alert('Timeout occurred.');
} else {
alert('Error occurred.');
}
}
}
});
I have also set a geomarker to see if I being detected anyway near the poi.
GeoMarker = new GeolocationMarker(mapOne);
It shows my GeoMarker directly on top of the marker with no alert. I tried a few different similar things with no success like the following....
if (GeoMarker == poi){
alert("poi found");
}
I know my process is wrong here in both cases as my position won't be exactly the same as the poi but I can't figure out how to set the proper proximity of the current position to to alert. I'm finding it hard to find any documentation that shows how to successfully implement something similar with respect to alerting at a poi. Any help or links to documentation that might help would be greatly appreciated.
Thanks in advance
I first got successful results through using 'if' statements to check if the difference between the latitude and longitude values of both points were less than a set variable. But I thought there must be a more efficient method of implementing this through some form of radius around the current location.
Finally came across this thread.... Calculate distance between two points in google maps V3 and as it suggested in one of the answers I used the following with success......
google.maps.geometry.spherical.computeDistanceBetween (latLngA, latLngB);
to check if the distance between both points was less than my desired distance. Hope this helps someone in the future.
Any information from anyone to alternative methods for carry out the same would be welcomed though.
I'm building a page with a Google MAP that has a side bar with dynamically created divs linked to positions of markers in the map.
I'm using ASP.NET MVC with JQuery and Google Maps API v3.
Here is a look of it.
This page is loaded in a splash window and is generated dynamically.
In the background page the user types a state or city in an input field and in my controller action I search for all people that are located in that area and return a JSON.
I get the JSON and populate the map with markers and then I make the list of divs in the side bar.
I'd like to add a function to those divs that when they are clicked the map will center at the marker.
I came up with an idea for this solution which I could not finish.
I added class="clickable" and the attributes "Lat" and "Lng" with the values equal to the ones in the markers they are related to, and I tried to get their click event with JQuery and then set the map center with its Lat and Lng like this:
$(".clickable div").click(function(){
$('map_canvas').panTo($(this).attr('lat'), $(this).attr('lng'));
}
I had 2 problems with this approach.
- First, I didn't know how to get the map with JQuery.
I found 2 ways using like $('map_canvas').gMap but it didn't work. Tried a couple more things that I've found here in Stackoverflow but also didn't work.
Second - The JQuery would not catch the event click from the DIVs.
I tested on Google Chrome console the JQuery code and It worked but then my code would not trigger the click.
I tried something like $(".clickable div").click(function(){ alert("test"); } on Google Chrome and it worked, but in my script it did not.
I also tried to add listeners using addDomListener in my code but couldn't get around that either.
Could anyone please give me a light what would be a good way to do this without having to recreate the map when a div is clicked.
I also don't like the idea of adding Lat and Lng attributes to the divs, I don't know if that would work in any browser or if its good practice. I'm just out of solutions to this.
Here is the code I'm using. (I removed some of it to make it shorter and easier to read)
$(document).ready(function () {
//Google Maps API V3 - Prepares the ajaxForm options.
var options = {
beforeSubmit: showRequestPesquisaAdvogados,
success: showResponsePesquisaAdvogados,
type: 'post',
resetForm: false
};
$('#form-pesquisaAdvogado').ajaxForm(options);
//$(".clickable").click(function () { alert($(this).attr('lat')) });
});
function showRequestPesquisaAdvogados(formData, jqForm, options) {
$("#modal-processing-background").show(); //Shows processing splash window
}
function showResponsePesquisaAdvogados(responseText, statusText, xhr, $form) {
$("#modal-processing-background").hide();
//Hide processing window
loadSplashWindow();
CreateMap(responseText);
CreateSideBar(responseText);
}
}
function CreateMap(json) {
var mapOptions = {
center: new google.maps.LatLng(json[0].Endereco.Lat, json[0].Endereco.Lng),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
// marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map-result"), mapOptions);
for (i = 0; i < json.length; i++) {
var data = json[i]
var myLatlng = new google.maps.LatLng(data.Endereco.Lat, data.Endereco.Lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.Endereco.Logradouro
});
(function (marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function (e) {
// Prepare the infoWindows content.
var contentString = //my content;
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
});
//here I tried to add the listener to the div.
google.maps.event.addDomListener($(".clickable")[i], 'click',
function () {
map.panTo(new google.maps.LatLng($(this).attr('lat'),
$(this).attr('lng')));
});
})(marker, data);
}
}
function CreateSideBar(json) {
$(".sideBarConteiner").empty();
for (i = 0; i < json.length; i++) {
var contentString =
"<div class='clickable' lat='" + data.Endereco.Lat +
"' lng='" + data.Endereco.Lng + "' >" +
//...div's content here
"</div>";
$(".sideBarConteiner").append(contentString);
}
}
If you have any suggestions to make the code better or better practices, since I have only 3 months of experience with programming I might be going in the wrong direction without knowing, so please, feel free to change something if you think it'd be a better way.
I know my post is a bit lenghty, I just wanted to make it clear.
Thank you for your support in advance.
Regards,
Cesar.
I've found a way to do this by creating a global variable in javascript and keeping the map information in order to call it again later.
To to this I just added a var "map" right at the top of the .
<script type="text/javascript">
$.ajaxSetup({ cache: false }); //Forces IE to renew the cash for ajax.
var zoom = 8;
var mapOptions, map;
And then call a method to pan to the right point.
I added the properties Lat and Lng to the div and then pass the div in the javascript function and get the attributes from it.
function CreateSideBar(json) {
$(".sideBarConteiner").empty();
for (i = 0; i < json.length; i++) {
var contentString =
"<div class='clickable' data-lat='" + data.Endereco.Lat +
"' data-lng='" + data.Endereco.Lng + "' onclick='MarkerFocus(this)'>" +
//...div's content here
"</div>";
$(".sideBarConteiner").append(contentString);
}
}
And in my function:
function MarkerFocus(obj) {
var myLatlng =
new google.maps.LatLng($(obj).attr('data-lat'), $(obj).attr('data-lng'));
map.panTo(myLatlng);
}
It worked for me. I hope it helps you too.
Thanks to all for the help and support.
Cesar