I am trying to iterate through GeoJSON map.data using a forEach. I want to return the position (LatLng) of each feature so I can add it to my markers array based on a feature property. Here's my attempt:
allMarkers = [];
jQuery.getJSON('json.php', function(data){
points = map.data.addGeoJson(data);
});
var eid = 30;
map.data.forEach(function(feature){
if(feature.getProperty('eid') === eid){
LatLng = feature.getGeometry().LatLng; //not sure how to get LatLng
id = feature.getProerty('id');
var marker = new google.maps.Marker({
position: LatLng,
map: map,
draggable: true,
id: id,
icon: imageActive,
});
allMarkers[id] = marker;
map.data.remove(feature);
}
});
I want to create a marker for the ones I want and remove those from the map.data and keep the remaining map.data for reference.
Any tips/suggestions are always appreciated.
It turns out that all I needed to change was "feature.getGeometry().latLng" to "feature.getGeometry().get()" like what was mentioned in the comments by #geocodezip.
I had tried "feature.get()" and that obviously didn't make sense. Not sure why I had the oversight. So what was obviously needed was:
LatLng = feature.getGeometry().get();
Thanks for the help.
Related
I need to know about to get google map points location in Meteor JS.For example in my map showing 10 pointers based on location latitude and longitude.When ever click a marker then shows location based on that pointer in a new window(or popup).
I didn't get any idea about this.So please suggest me what to do for this?
Thanks in advance.
What you need here its an InfoWindow, wich have the content option.
So lets say you have this simple initialize function
initializeMap = function() {
//Common code to init the map.
//common code to create dynamic markers already give you an answer here
//https://stackoverflow.com/questions/28424854/how-can-i-create-multiple-markers-on-a-google-map
//now on the same function lets add this code
function createMarkers(){
for(var i = 0 ; i <latLong.length ; i++) {
//lati and long are declared as global variables.
lati = latLong[i].lat;
longi = latLong[i].long;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lati, longi),
map: map,
icon: 'http://Yourimagesourcehere'
});
//and this is how you call it.
myInfoWindow(marker2,map,lati,long);
}
//Function to created infoWindows.
function myInfoWindow(marker2,map,lati,long){
google.maps.event.addListener(marker2, 'mouseover', function() {
for(var i=0;i<markerArray.length;i++){
infoWindow.setContent( 'My lat is ' + lati + "my long is " + longi );
infoWindow.open(map, marker2);
}});
google.maps.event.addListener(marker2, 'mouseout', function() {
infoWindow.close();
}
}
}
So like you see based on the other question How can i create multiple markers on a google map, in this example we added the new function named myInfoWindow with 4 parameters, the marker,the map, and the 2 variables for the content (in this case late,long)
If you have doubts about how to init the map or how the code should look i have this DEMO and here is the Source Code, just add the infoWindow function inside the createMarkers function and it should work.
Tell me if Works.
I am using Markerclustererplus with Google Maps API v3 to ease the display of markers on the screen.
The problem is that I will have several markers in the exact same place (and it should be that way) and I would like to, when clicking on a cluster, to display an info window containing all the markers that were clustered.
I've tried several code and similar questions here in StackOverflow, unfortunately I do not master JS and couldn't solve this.
Markers are pushed into an array with some data:
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : marker_image
});
map.markers.push(marker);
When I click an isolated marker, the info window appears ok with a title and an image of that marker:
var infowindow = new google.maps.InfoWindow({
content : $marker.attr('data-title') + '<img width="50" src="' + $marker.attr('data-image') + '">'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
What I would like to happen, is that when clicker a cluster, an info window would open with all of the markers it contains displayed with their corresponding title and image (like, reversing the clustering operation).
Thank you for the help.
Managed to solve this, thanks to the example provided in here.
If anyone is interested, here is how I've done:
First, I've added the markers to the map getting data attributes coming from several custom fields from Wordpress custom posts:
function add_marker( $marker, map ) {
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var marker_image = $marker.attr('data-marker');
var marker_name = $marker.attr('data-title');
var marker_userpicture = $marker.attr('data-image');
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : marker_image,
name : marker_name,
userpicture : marker_userpicture
});
map.markers.push(marker);
Created the MarkerCluster:
var markerCluster = new MarkerClusterer(map, map.markers, mcOptions);
Added a click event listener that got the markers from the cluster, their data, created the info window content from that data and finally opened the info window:
google.maps.event.addListener(markerCluster, 'click', function(cluster){
var content ='';
var clickedMarkers = cluster.getMarkers();
for (var i = 0; i < clickedMarkers.length; i++) {
if(i==0) {
var var_pos = clickedMarkers[i];
}
var clickedMarkersNames = clickedMarkers[i].name;
var clickedMarkersPicture = clickedMarkers[i].userpicture;
content +=clickedMarkersNames;
content +=clickedMarkersPicture;
}
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
infowindow.open(map,var_pos);
});
I have the following function. geolocationService.getNearbyPeoples() is a service that
fetch data from db.
function nearbyPeoples(meLat, meLng, map){
geolocationService.getNearbyPeoples(meLat, meLng).then(function(response){
for (var i = 0; i < response.data.length; i++) {
var nearbyLatLng = new google.maps.LatLng(response.data[i].lat, response.data[i].lng);
var nearbyMarkers = new google.maps.Marker({
position: nearbyLatLng,
title: response.data[i].first_name
}).setMap(map);
};
});
}
then when dragend a center marker (meMarker) will call the function above to show nearby markers
google.maps.event.addListener(meMarker, 'dragend', function() {
nearbyPeoples(meMarker.position.lat(), meMarker.position.lng(), map);
});
then I want to remove the previous markers in dragstart. The reason is to prevent duplicated
markers if meMarker is dragend same location.
google.maps.event.addListener(meMarker, 'dragstart', function() {
});
But I have no idea how to remove or any better suggestions?
Instead of removing markers, why not keep a list (object) of markers as they are added and use it to avoid duplicating a marker? And/or use it to remove markers outside the bounds of the map view, if you must remove markers.
I'm using the Google Maps API v3 to generate some minimaps. I have one custom marker in a small map with controls hidden. This works great. Now, I'd like to add a link so that clicking this marker will open the full Google Maps with this location selected. Seems obvious.
I'm creating a marker like this.
var pin = new google.maps.LatLng(myLat,myLong);
var marker = new google.maps.Marker({
position: pin,
map: map,
title:"Hello World"
});
This seems like it should be obvious, what am I missing? Do I need to construct my link and assign it myself?
This should work (not tested):
var pin = new google.maps.LatLng(myLat,myLong);
var marker = new google.maps.Marker({
position: pin,
map: map,
title:"Hello World"
});
google.maps.addListener(marker, "click", function() {
window.location = "https://maps.google.com/maps?ll="+pin.toUrlValue;
});
Working example (built on an existing example, not from the above code)
Ended up finding the answer thusly:
google.maps.event.addListener(marker, 'click', function() {
window.open("https://maps.google.com/maps?ll="+pin.toUrlValue(),'_blank');
});
I wonder whether someone may be able to help me please.
I've put some coding together (please see below) whereby a user goes onto a HTML form, they type in an address and click a 'Search' button. Upon doing this, the location is plotted on the Google map and the Lat and Long co-oridnates are automatically entered into the associated text boxes on my form.
What I would like to do, if at all possible, is for the marker to be draggable so the user can fine tune the location, and as they drag the marker, I'd like for the Lat and Long fields to change their
associated co-ordinates.
In addition, I'd also like, if at all possible, to have a field on the form called 'NearestAddress' to show the nearest address to where the marker has been dragged to.
I've managed to make the markers draggable but they don't update the Latitude and Longitude text boxes. I'm also unsure how to add the functionality to show the updated address to where the marker has been dragged to.
(function() {
// Defining some global variables
var map, geocoder, myMarker, infowindow;
window.onload = function() {
// Creating a new map
var options = {
zoom: 3,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Getting a reference to the HTML form
var form = document.getElementById('LocationSearchForm');
// Catching the forms submit event
form.onsubmit = function() {
// Getting the address from the text input
var address = document.getElementById('Address').value;
// Making the Geocoder call
getCoordinates(address);
// Preventing the form from doing a page submit
return false;
}
}
// Create a function the will return the coordinates for the address
function getCoordinates(address) {
// Check to see if we already have a geocoded object. If not we create one
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Creating a GeocoderRequest object
var geocoderRequest = {
address: address
}
// Making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// Check if status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Center the map on the returned location
map.setCenter(results[0].geometry.location);
// Creating a new marker and adding it to the map
var myMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable:true
});
document.getElementById('Latitude').value= results[0].geometry.location.lat();
document.getElementById('Longitude').value= results[0].geometry.location.lng();
google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt){
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
}
});
}
})();
I am new to Google maps development and I'm not even sure whether it's possible to achieve what I want. I've been working on this now for a few weeks and it's driving me a little crazy, so if someone could perhaps point me in the right direction it would gratefully be received.
Many thanks and kind regards
Chris
Instead of evt.latLng.lat().toFixed(3) you should just use the myMarker object and grab it's position.
Getting the nearest address is not that easy, but requires reverse geocoding, and to be honest I don't see the point in doing it. You would have to make special cases for the occurences where there couldn't be found a closest address and stuff like that.
If you really want to do it though there is a webservice you can call to do it.