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
Related
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()
};
}
);
}
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'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');
});
In my application using Google maps APIv3, I am trying to randomly generate some markers attached with a polyline. I have done the following:
//Loop to add locations and draw line
var path= polyline.getPath();
for(var i=0;i<route.length;i++) //route is an array containing some latlng's
{
var marker= new google.maps.Marker({position:route[i],map:map});
path.push(route[i]);
}
//Event Listener's
google.maps.event.addListener(marker,'click',function(event)
{
iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng());
//iwindow is the InfoWindow variable
iwindow.open(map,marker);
});
The issue here is that the marker on click always has the marker reference of the last marker in the for loop. So only the final marker displays the infowindow.
How do I change my code so that every marker click generates an InfoWindow?
The callback is the same for each marker, so it's fine to define that outside the scope of the loop. But a separate listener needs to be attached to each marker, so put that code inside the loop.
function showPopup(event) {
iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng());
iwindow.open(map,marker);
});
for(var i=0;i<route.length;i++) {
var marker= new google.maps.Marker({position:route[i],map:map});
path.push(route[i]);
google.maps.event.addListener(marker,'click',showPopup);
}
I have found the function below which creates only one marker - which is what I want.
But how do I change the marker options e.g. html - without creating a new one?
i.e. the code below will move an existing marker using setPosition but what if I also want its html and title changed....
var marker;
function placeMarker(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
The html is the content of the infoWindow bound to the marker's 'click' event. There is an infoWindow.setContent() method. I would extend the marker to hold the html content when you create it, then update it where you reset the position, title, etc. Then you need to write you own 'click' event handler to use something against a single global infoWindow.
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(marker.html);
infowindow.open(map,marker);
});
the properties of the marker object mostly have corresponding get and set methods, as detailed in the documentation
For example, Title has a get_Title() method and a set_Title() method, which you can use like this...
myMarker.setTitle('my new title');
Maker is a MVCObject and this class have the set method
marker.set(property, New_Value);
If you want to change more than one property, you can use setOptions method