Get latitude and longitude of mouse click in KML plotted using geoxml3 - google-maps-api-3

Is there any way to get the right click event on a parsed KML layer using geoxml3 on google map.I am getting the right click event of map ie outer region of KML. But i am not able to get the click event on the parsed KML.
I have used like this
var geoXml = new geoXML3.parser({
map: map
});
geoXml.parse('file.kml');

geoxml3 parses the KML to native Google Maps Javascript API v3 objects. To add a right click events to them, you need to either add custom createMarker, createPolyline, createPolygon functions that add the right click listeners as the objects are created or process the results and add the listeners to the output.

The following was helpful and got the latitude and longitude when right clicked on a KML layer in google map
var geoXml = new geoXML3.parser({
map: map,
afterParse: function (doc) {
for (var i = 0; i < doc[0].placemarks.length; i++) {
var p = doc[0].placemarks[i];
clickablePolygon(p);
}
}
});
geoXml.parse(parameter.FileName);
function clickablePolygon(p) {
google.maps.event.addListener(
p.polygon,
"rightclick",
function (event) {
var clickedLocation = event.latLng;
var latlng = {
lat: clickedLocation.lat(),
lng: clickedLocation.lng(),
zlevel: map.getZoom()
};
}
);
}

Related

Get google map Markers location in Meteor js

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.

Google maps api v3 remove markers when dragstart

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.

Pointer on google map

I have requirement of displaying an address on a click of a button, for which i got the latitude and longitude of the desired location,
while mapping in URl
https://maps.google.com/?ll=28.64036031970850,77.24250191970849
like this. I don't get the desire pointer on google map Like which we get A in red pointer.
Thanks for any assistance.
Try this. Change the lat/long as per your need.
https://maps.google.com/?q=22.917923,72.773438
You can use custom markers for this. Here is a snippet to get you started:
// Create the map
var map = new google.maps.Map($("#map-result"), mapOptions);
// Create the marker on the map
var marker = new CustomMarker(new google.maps.LatLng(pinLatitude, pinLongitude), map, searchResults[i], markerNumber);
// Add listener to react to click of marker
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
// Call some function to do something
showSelectedMarker();
}
})(marker, i));
A very good example is here:
Google Maps JS API v3 - Simple Multiple Marker Example

fire click event on individual marker while using leaflet markercluster plugin

My site consists of a Leaflet map with the leaflet.markerclusters plugin. I am also using Flowplayer to play a video that opens in a JQuery Tools overlay using the selector id "#video1".
Currently, when I click on any marker on the map it fires my test video in an overlay. My goal is to create a click event unique to each individual marker in the cluster. Eventually, I would like every marker to have a click event that fires a video unique to that marker.
I am a beginner, and have been doing okay using these well documented libraries up until now. However, I don't have the skills to bridge this current gap. Would someone please give me a push in the right direction? Below is a link to my JS Fiddle. My issue begins on JavaScript line 2098.
var markers = new L.MarkerClusterGroup();
var addressPoints = [
[40.634902, -73.965054, "Video1"],
[40.660897, -73.961082, "Video2"],
[40.693353, -73.970413, "Video3"],
[40.693289, -73.966289, "Video4"],
[40.68973, -73.971007, "Video5"],
[40.718423, -73.957428, "Video6"],
[40.71817, -73.956918, "Video7"],
[40.681427, -73.993959, "Video8"]
];
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
//assign video div ID to overlay
$('#video1').overlay({
load: false,
top: "center",
left: "center"
});
//bind marker click event to overylay
markers.on('click', function () {
$("#video1").data("overlay").load();
});
Thank you,
Joey
http://jsfiddle.net/Joey84/nM458/26/
You are headed in the right direction with the markers.on("click"... function. You just need to make a few edits. Just as you added the event listener to the entire "markers" layer, you can add it to individual markers in your for loop.
...
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
if (title=="Video1") {
marker.on('click', function () {
$("#video1").data("overlay").load();
});
}
marker.bindPopup(title);
markers.addLayer(marker);
}
...
Likewise - and probably the better solution - you can access details about the marker you clicked in the on("click"... you are currently using by passing a variable to the function. This would be useful if you have multiple videos and don't want to check with an if statement when creating markers.
markers.on('click', function (d) {
// Grab marker title and make it look like an ID
var marker_title = "#" + d.layer.options.title.toLowerCase();
// Make sure the jQuery object exists
if ( $(marker_title) ){
// Call up the video.
$(marker_title).data("overlay").load();
}
});
Note that I used toLowerCase() because your data has the title capitalized and the video id is all lowercase.
Here it is in action:
http://jsfiddle.net/nM458/44/

Draggable Marker to Update Lat and Long Fields

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.

Resources