In my map lot of markers but i want to specific marker latitude and longitude when i clicked it.
when i click a single marker for latitude and longitude i got all markers latitude and longitude.
navigator.geolocation.watchPosition(position => {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var marker = new mapboxgl.Marker()
.setLngLat([lng, lat])
.addTo(this.map);`enter code here`
function clickAndGetLatLngOfMarker()
{
var lngLat = marker.getLngLat();
console.log(lngLat.lng);
console.log(lngLat.lat);
}
this.map.on('click', clickAndGetLatLngOfMarker)
});
}
A marker is an HTML element that exists in the DOM, not in the map. You should attach a click handler to it, using jQuery or similar, not using map.on("click"),
Related
In firestore database, I've location stored in this form - location: [30.4345685454346° N, 2.134343291302° W]
How can I remove ° N and ° W from the coordinates when I fetch them?
Also, the coordinates are set into the Firestore api using this way
location: new GeoPoint(position.latitude, position.longitude)
GeoPoint is basically firebase's object type to store latitude and longitude. I'm assuming you have react-native-firebase installed. Then you can retrieve latitude and longitude as follows
const yourGeoPoint = new firebase.firestore.GeoPoint(someLatitude, someLongitude);
const latitude = yourGeoPoint.latitude; // this will give the latitude
const longitude = yourGeoPoint. longitude; // this will give the longitude
More documentation on this can be found at https://rnfirebase.io/docs/v5.x.x/firestore/reference/GeoPoint
I have a Google map driven by Advanced Custom Fields. I have created an iconType to dictate which icon is used as the marker depending on the custom field.
My marker images are 80px square but I want to force them to 40px square for retina reasons. I have tried lots of variations of code I've found via google etc but nothing works and the size gets ignored showing my markers at the larger 80px. My guess is because I have the 2 icons depending on iconType?
Can anyone help me force the size of these markers to 40px square please...
function add_marker( $marker, map ) {
// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng'));
var iconType = $marker.attr('data-icon');
var iconBase = '<?php echo get_template_directory_uri(); ?>/assets/';
var size = new google.maps.Size(40, 40);
if (iconType === 'Costa') {
iconName = 'costa#2x.png';
} else {
iconName = 'starbucks#2x.png';
}
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map,
clickable: false,
animation: google.maps.Animation.DROP,
icon: iconBase + iconName,
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
}
}
I did something like this recently, and I believe you'll need to use the new Icon object to specify your custom Icon properties, and use the size and scaledSize properties. I fixed my issues following this guide:
How to add retina ready pin marker to your Google maps?
i have a probleme to my infowindow, i can't show my title and description on it.
The relation between my data base and google api is good because i can show my marker on the map but when i click on it there is nothing in the infowindow.
Here's my code:
function createMarker(lat, lng, titre, description, adresse){var latlng = new google.maps.LatLng(lat, lng);var marker = new google.maps.Marker({position: latlng,map: map,title: titre});
contentString =
'<div class="descritpion" >'+'<a>(titre)</a>'+''
'</div>';
var infobulle = new google.maps.InfoWindow({content: contentString,});google.maps.event.addListener(marker, 'click', function(){infobulle.open(map, marker);});}
This is sort of how I do it (though I usually also hold all the markers in an array so they can be cleared, or updated as a group). Also, I'm assuming your syntax around titre was wrong, and have corrected to to be what I thought you wanted to achieve.
var MyInfoWindow = new google.maps.InfoWindow({content: 'Loading...'});
function createMarker(lat, lng, titre, description, adresse){
var point=new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({position: point,map: map});
marker.html='<div class="descritpion" ><a>('+titre+')</a></div>';
google.maps.event.addListener(marker, 'click', function () {
MyInfoWindow.setContent(this.html);
MyInfoWindow.open(map, this);
});
}
I have a Mapview in my Titanium project. I can get the map to focus on a specefic latitude and longitude on load, but I can't seem to get it to focus on users currentLocation on load? What is the code for that?
Thanks.
You can get your current location using getCurrentPosition function and then focus map to this location.
Here is an example:
Ti.Geolocation.getCurrentPosition(function(e) {
if (e.error) {
return;
}
storesMap.setLocation({
latitude : e.coords.latitude,
longitude : e.coords.longitude,
latitudeDelta : 0.01,
longitudeDelta : 0.01
});
});
I would like to pass an x amount of geo-locations to the Google Maps API and have it centered around these locations and set the appropriate zoom level so all locations are visible on the map. I.e. show all the markers that are currently on the map.
Is this possible with what the Google Maps API offers by default or do I need to resolve to build this myself?
I used fitBounds (API V3) for each point:
Declare the variable.
var bounds = new google.maps.LatLngBounds();
Go through each marker with FOR loop
for (i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(markers[i].lat, markers[i].lng);
bounds.extend(latlng);
}
Finally call
map.fitBounds(bounds);
There are a number of ways of doing this but it is pretty easy if you are using the V2 API. See this post for an example, this group post or this post.
For V3 there's zoomToMarkers
Gray's Idea is great but does not work as is. I had to work out a hack for a zoomToMarkers API V3:
function zoomToMarkers(map, markers)
{
if(markers[0]) // make sure at least one marker is there
{
// Get LatLng of the first marker
var tempmark =markers[0].getPosition();
// LatLngBounds needs two LatLng objects to be constructed
var bounds = new google.maps.LatLngBounds(tempmark,tempmark);
// loop thru all markers and extend the LatLngBounds object
for (var i = 0; i < markers.length; i++)
{
bounds.extend(markers[i].getPosition());
}
// Set the map viewport
map.fitBounds(bounds);
}
}