Good day!
I just want to ask if an InfoBubble can have a listener. I tried to insert the text of the InfoBubble in a div and insert an onclick command there, but nothing happens.
Thanks in advance. By the way I am currently developing an android application, and using webview to display the map.
ok, jetpro,
here's what I do in a similar scenario using javascript:
/* json data object requires:
data.Id,
data.Lat,
data.Lng,
data.Name,
data.Address,
data.Date
*/
function DisplayMapEvent(data, targetDiv) {
var latlng, options, map, contentString, infowindow, marker;
// setup our variables
latlng = new window.google.maps.LatLng(data.Lat, data.Lng);
options =
{
zoom: 15,
center: latlng,
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
// create the map inside our map <div> and apply the options
map = new window.google.maps.Map(document.getElementById(targetDiv), options);
map.setOptions(options);
// info to display in the infowindow popup
contentString =
'<div>' +
'<b style="color: #DC6852;">' + data.Name + '</b><br />' +
'Where: ' + data.Address + '<br />' +
'When: ' + data.Date + '<br />' +
'</div>';
// info/marker and popup objects setup
infowindow = new window.google.maps.InfoWindow({
content: contentString
});
marker = new window.google.maps.Marker({
position: latlng,
map: map
});
// add the usual suspect event handlers
window.google.maps.event.trigger(map, 'resize');
// to allow us to repoen a map marker infowindow if closed
window.google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
// open infowindow on map once rendered
infowindow.open(map, marker);
// sit back and wonder at the glory of google maps mow :-)
}
In my case, I'm passing a json object into the DisplayMapEvent function, but you could rejig this to your own requirement. This function is called anytime I wish to add a new marker onto my map, so you may be able to lift this wholesale and refactor as required.
Hope this helps.
Add listener like this
google.maps.event.addDomListener(infoBubble2.bubble_, 'click', function(){..});
Have fun!
Related
I'm using the Mapbox Android SDK and want to populate the map with markers whose locations are stored in a Firebase database common to all users of my application. Each marker is stored in a unique record and each record contains the Latitude & Longitude of the marker along with a boolean value indicating if the location has been verified. I have successfully done this using the Mapbox iOS SDK using Annotations.
When the Android App is launched I create a feature list of all markers in the database using symbolOptions as shown below inside of the Firebase "childAdded" listener (other listeners are also implemented as part of the ChildEventListener):
DatabaseReference dbRef = FirebaseDatabase.getInstance().getReference();
DatabaseReference markerRef = dbRef.child("markers");
//load all markers when app starts
//child added returns all markers, then listens for new additions
//Log.i(TAG, "Database Reference: " + dbRef);
List<SymbolOptions> options = new ArrayList<> ();
markerRef.addChildEventListener ( new ChildEventListener () {
#Override
public void onChildAdded(#NonNull DataSnapshot dataSnapshot, #Nullable String s) {
markerRead = markerRead+1;
markerKey = dataSnapshot.getKey();
Log.i(TAG, "Adding Markers: ");
Log.i(TAG, "Marker Key: " + markerKey);
x = (Double)dataSnapshot.child ( "x" ).getValue();
y = (Double) dataSnapshot.child ( "y" ).getValue();
v = (Boolean) dataSnapshot.child ( "v" ).getValue();
Log.i(TAG, "Marker Data - x: " + x + " y: " + y + " v: " + v);
if(v == true) {
options.add(new SymbolOptions ()
.withLatLng ( new LatLng (y,x))
.withIconImage ( "verified" )
.withIconAnchor ( "bottom" )
.withDraggable ( false )
);
} else {
options.add(new SymbolOptions ()
.withLatLng ( new LatLng (y,x))
.withIconImage ( "unverified" )
.withIconAnchor ( "bottom" )
.withDraggable ( false )
);
}
if (markerRead == 1) {
symbols = symbolManager.create(options);
}
}
The above code does populate the feature list, but since I have no way of knowing when the Firebase "childAdded" function has completed the initial read of the database, the above only adds the first marker.
I have tried to find Mapbox documentation on how to add annotations analogous to the iOS SDK but have been unsuccessful. The tutorial videos have not been updated and use "addMarker" which has been deprecated.
I need to add markers to the map and I also need to assign a unique ID (the "markerKey" in the above code) to each marker so that an individual marker can be changed or deleted in the future. Also the map needs to display new markers that are added and detected by the "child Added" listener. I have not found a way to have additions to the feature list be displayed when added and the symbols created.
Once the markers are initially added to the Map, the App "Listens" to the Firebase database for the following events:
A new marker is added
An existing marker is moved to a new location
An existing marker is deleted
When a marker is moved or deleted the appropriate database listener is notified and passed the record number (key) of the marker ("markerKey" in above code) that was moved (or deleted). If the marker was moved, the record will then contain the new Latitude & Longitude information.
Thanks in advance for the help.
Firstly, I'm not a developer or programmer so any help here would be really appreciated! I have a form for use on android mobile devices which launches in Google Chrome. The users can use this form when offline and I was wondering how best to get offline GPS co-ordinates in lat and long. I've been doing some digging around and the code below seems to work. I pull the lat, long and accuracy result from this code into a separate field on my form.
What I am not sure about is how to pull in a timestamp so that I can be assured the reading is current and not something cached on the device. The currency and reliability of the coordinates is very important to me.
Any help at all on this would be marvellous!!
Thanks, Angela
<!DOCTYPE html>
<html>
<body>
<p>Get your latitude and longitude (test this to ensure it works when out of coverage)</p>
<button onclick="getLocation()">Get your coordinates</button>
<p id="demo"></p>
<script>
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;
"<br>Accuracy: " + position.coords.accuracy + '<br />'
}
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude +", Accuracy " + position.coords.accuracy;
$('input[name="coords"]').val(latlon).trigger('input');
}
</script>
</body>
</html>
getCurrentPosition accepts a second parameter, PositionOptions. There are a few options you can experiment with to achieve desired results, but specifically you'll want to use maximumAge and enableHighAccuracy. To ensure uncached results:
navigator.geolocation.getCurrentPosition(function(pos){
console.log('Got position', pos);
}, {
// can be `0` = uncached, any number in milliseconds,
// or `Infinity` which will only retrieve cached results
maximumAge: 0,
// may take longer, but browser will do everything possible
// to get the most accurate position
enableHighAccuracy: true
});
It's also worth noting the returned Position comes with an accuracy property, which returns a positive double indicating the accuracy of your lat and long in meters. Depending on the use case, you may want to require a certain accuracy threshold for users to interact with your app. You can see the full spec here.
I have a list of addresses and I want to mark this places all in google maps(nearly 1k), getting maybe its cordinates to save them.
Actually I am not programming an app, but I know both lenguages (Android and PHP) and I think it is possible to do this with both. Any idea ? Thank in advance!
Have you tried the google maps api?
https://developers.google.com/maps/documentation/geocoding/intro
https://developers.google.com/maps/documentation/geocoding/intro#ReverseGeocoding
This is what you are looking for I think.
EDIT: to mark stars on map
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
function initialize() {
var bangalore = { lat: 12.97, lng: 77.59 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: bangalore
});
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Add a marker at the center of the map.
addMarker(bangalore, map);
}
// Adds a marker to the map.
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
map: map
});
}
I have a huge problem with my ionic app.
When the user clicks on a point of interest, for example train stations and clicks on "open in Google Maps" The App opens the link fullscreen in the app and you have to kill the app, since there is no close button. The Softkeys don't work.
See here:
I guess I have to use the inappbrowser, but how can I enable it inside the map? Deactivating the POI's isn't an option.
Any help much appreciated!
In my case i had in controller.js:
'<a onclick="goto('+obj1[j].places.items[0][0]+','+obj1[j].places.items[0][1]+')">Open in google maps!</a>'
and then in function goto:
window.goto = function(lat,lon){
window.open("https://www.google.com/maps/dir//"+lat+","+lon+"/#",'_system', 'location=yes');
}
Edit:
(....your code....)
var popupContent1 = '<div id="locationContent1">' +
'<div> ' + item.storeName + '</div>' +
'<div> ' + item.address + '</div>' +
'<div> ' + item.city + '</div>' +
'<div>' +'<a onclick="goto('+item.latitude+','+item.longitude+')">Open in google maps!</a>'+ '</div>' +
'</div>';
createInfoWindow(marker, popupContent1);
//marker.bindTo('map',cat.data('goo'),'map');
var infoWindow = new google.maps.InfoWindow();
function createInfoWindow(marker, popupContent1) {
google.maps.event.addListener(marker,'click',function(){ infowindow.setContent(popupContent1);
infowindow.open(map,this);
})
}
I'm trying to create a button on the jQuery Ui Map, when the user clicks the button the map should panTo (or center) on the users location
I have the following control
<div id="userLocate" style="margin:15px 15px 15px 20px;padding:5px 5px 5px 10px;"><img src="img/locate.png"></div>
And this JS
$('#map_canvas').gmap().bind('init', function() {
//Set click event on userLocationControl
$('#userLocate').click(function(event) {
var lat = newPoint.lat();
var lng = newPoint.lng();
var np = new google.maps.LatLng(lat, lng);
console.log("lat: " + lat + " lng: "+ lng);
$('#map_canvas').gmap('get', 'map').panTo(np);
console.log("lat: " + np.lat() + " lng: "+ np.lng());
$('#map_canvas').gmap('option', 'zoom', 15);
});
//Add userLocationControl
$('#map_canvas').gmap('addControl', 'userLocate', google.maps.ControlPosition.RIGHT_BOTTOM);
});
When the button is clicked I can see the log writing the correct latitude and longitude before and after the call to panTo method, however the map is being panned to position 0,0. I've tried using the setCenter method and have the same result
If call the method outside the click function and send it the newPoint variable (which is a LatLng object) everything works fine
Finally made it, I had to add a return; statement, beats me... but it works