i have a function that i can give coordinate into input by click on map.
i want to can get two coordinate of two point on map for get direction between them by two click on map.
how can i do this?
var pointa;
var pointb;
google.maps.event.addListener(map,'click',function(event){
var point=new google.maps.LatLng(event.latLng.lat(),event.latLng.lng());
document.path.lat1.value=event.latLng.lat();
document.path.lon1.value=event.latLng.lng();
pointa=new google.maps.Marker({
map: map,
position: point,
icon:'http://google.com/mapfiles/kml/paddle/A.png ',
draggable:true
});
});
You're already creating a marker when they click. You can readily tell when they click a second time by looking at pointa. pointa will have the value undefined to start with. That value is "falsey," but when you store a Google Maps Marker reference in pointa it's no longer falsey. So you can use "if (!pointa)" to know that you're dealing with the first click:
var pointa;
var pointb;
google.maps.event.addListener(map, 'click', function (event) {
var point = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
document.path.lat1.value = event.latLng.lat();
document.path.lon1.value = event.latLng.lng();
if (!pointa) {
// This is the first click
pointa = new google.maps.Marker({
map: map,
position: point,
icon: 'http://google.com/mapfiles/kml/paddle/A.png ',
draggable: true
});
}
else {
// This is a subsequent click (the second, third, etc.)
}
});
Related
I need to use the location a marker is placed to be able to load weather data via another API. I have my map dropping a loading and dropping a marker as well as a object "myPosition" which should contain the lat and lon of the marker. My issue is getting the myPosition.lat and .lng to update with the coordinates of the marker. Below is the code I have thus far and I am able to get the initialized data from myPosition in another file but I cant figure out how to get the coordinates. This is my first time using HTML and JS and I usually use C++ or Java so its a bit of a change for me.
var myPosition =
{
lat: 0,
lng: 0
};
function initMap()
{
var texas = {lat: 32.7767, lng: -96.7970};
var map = new google.maps.Map(document.getElementById('map'),
{
zoom: 10,
center: texas
});
var marker = new google.maps.Marker({
position: texas,
map: map
});
google.maps.event.addListener(map, 'click', function(event)
{
placeMarker(event.latLng);
});
function placeMarker(location)
{
if (marker == undefined)
{
marker = new google.maps.Marker(
{
position: location,
map: map,
animation: google.maps.Animation.DROP,
});
}
else
{
marker.setPosition(location);
}
map.setCenter(location);
}
}
Sounds like what you need is to think about the problem less as your 'other file' accessing the coordinates, and more as notifying your other module that a mouse click on the map has occurred by means of a callback.
Eg. In weather.js
function handleCoords(latlng){
//...Do whatever you want with latlng
}
// Export function as needed if you're using modules/webpack.
// (don't worry if you don't know what this means)
Then in your main.js in your embedded HTML embedded JS
// import {handleCoords} from './weather'
// Again ignore this if you're not using modules/don't know what this means.
google.maps.event.addListener(map, 'click', function(event){
placeMarker(event.latLng);
handleCoords(event.latLng); // This is how you pass the latlng
// along to weather.js
});
i'm new to javascript, hope you'll forgive me my bad if i'm doing something wrong.
In fact, i've allready found a solution for my problem, but i don't get how exactly get it into my own code.
Google Maps API - bouncing marker issue
Unfortunately i can't just comment it because i'm new on stackoverflow.
My Problem:
I'm working on a map with several markers on it. If i click on a marker, i want it bouncing and switching its color by a different icon i set. All fine till this point, but at the moment all markers i clicked won't stop bouncing. I want the marker bouncing, till i click another marker. At this point the "old" marker should stop bouncing and just the new one start.
//Marker Icons
var unvisitedMarker = 'img/m1.svg';
var activeMarker = 'img/m2.svg';
var visitedMarker = 'img/m3.svg';
//Add Marker Function
function addMarker(props) {
marker = new google.maps.Marker({
position: props.coords,
map: map,
icon: unvisitedMarker
});
//Opens marker information
var marker.addListener('click', function() {
document.getElementById("paperContainer").style.top = '40vh';
document.getElementById("locationBar").style.top = 'calc(40vh - 2em)';
map.panTo(marker.getPosition());
//Panby the map-position
map.panBy(0, 350);
//Set active Marker Icon
marker.setIcon(activeMarker);
//Set Marker Animation
marker.setAnimation(google.maps.Animation.BOUNCE);
});
}
So i got this code from the other Thread i linked from user "doublesharp":
// track marker that is currently bouncing
var currentMarker = null;
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
document.getElementById('loc-info').innerHTML = html;
// remove the bounce from the "old" marker
if (currentMarker) currentMarker.setAnimation(null);
// set this marker to the currentMarker
currentMarker = marker;
// add a bounce to this marker
marker.setAnimation(google.maps.Animation.BOUNCE);
});
}
I don't know exactly how to implement this in my owm code. And further - how do i get realized to switch the icon after it stoped bouncing to the "visitedMarker"?
Thank you very much in advance!
The idea of that solution is to keep a reference to the clicked marker and modify that marker when a new one is clicked.
This is what I mean:
var currentMarker = null; // Define this variable preferably in the global context.
....
marker.addListener('click', function() {
if(currentMarker){ // Check if there is already an active marker
currentMarker.setAnimation(null);
currentMarker.setIcon(visitedMarker);
}
currentMarker = marker;// Keep a reference to this marker because it will became active.
document.getElementById("paperContainer").style.top = '40vh';
document.getElementById("locationBar").style.top = 'calc(40vh - 2em)';
map.panTo(marker.getPosition());
//Panby the map-position
map.panBy(0, 350);
//Set active Marker Icon
marker.setIcon(activeMarker);
//Set Marker Animation
marker.setAnimation(google.maps.Animation.BOUNCE);
});
On small zoom levels one place will be displayed twice or more (world map is repeated horizontally). When I place marker on map with coordinates (e.g. -32.05604, 115.74718) I will see it on map more than once. It's normal.
But if I try to show infowindow on mouse hover I will get wrong behaviour. Infowindow will be always showed near one of my markers and never near other, without relation what marker was under mouse cursor.
See example here: (try to move mouse to left marker on map).
https://jsfiddle.net/m3wpk1gr/1/
How to show infowindow for marker which under mouse?
My code:
function initialize() {
var myLatLng = new google.maps.LatLng(-32.05604, 115.74718),
myOptions = {
zoom: 1,
center: new google.maps.LatLng(-32.05604, 0)
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
marker.setMap(map);
var iw = new google.maps.InfoWindow();
marker.addListener('mouseover', function() {
iw.setContent('InfoWindow');
iw.open(map, this);
});
marker.addListener('mouseout', function() {
iw.close();
});
}
initialize();
I'm afraid there is nothing you can do to get the desired result(the position is correct, so when the position exists multiple times on a map, the API has to make a decision).
What you can do: set the optimized-option of the marker to false, then they will not be repeated at lower zoom-levels
This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 8 years ago.
Problem with the following code is that the click event is not fired. The markers appear on the map as expected, but when clicked, nothing appears in the console. I've been searching for a while now, but all the answers I find are not relevant to my code.
/*
* Connect to Google API, load map and markers
*/
function drawMarkers(markerInfo) {
var mapOptions = {
center: { lat: 50.601079, lng: 4.4764595},
zoom: 8,
scrollwheel: false,
styles: style
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
for (var i = 0; i < markerInfo.length; i++) {
var Latlng = new google.maps.LatLng(markerInfo[i][0],markerInfo[i][1]);
var title = markerInfo[i][2];
var marker = new google.maps.Marker({
position: Latlng,
animation: google.maps.Animation.DROP,
map: map,
title:title,
icon: markerUrl
});
};
google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});
};
google.maps.event.addDomListener(window, 'load', getmarkerInfo);
I've got no idea what the problem could be, because there are no errors, and I can't seem to find the problem...
EDIT: When I refresh the page and I zoom out, so a marker which wasn't visible yet get's loaded in, only that one responds to the click event.
You only add the listener to the last marker, attach the listener in the loop and you'll be attaching the event to each marker.
for (var i = 0; i < markerInfo.length; i++) {
var Latlng = new google.maps.LatLng(markerInfo[i][0],markerInfo[i][1]);
var title = markerInfo[i][2];
var marker = new google.maps.Marker({
position: Latlng,
animation: google.maps.Animation.DROP,
map: map,
title:title,
icon: markerUrl
});
google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});
};
You should probably create a function , which accepts marker as the argument , and call the function from within the for loop itself passing the current marker as the parameter.
function addListner(marker)
{
google.maps.event.addListener(marker, 'click', function() {
console.log('test');
});
}
And call the function inside the loop.
While referring to marker outside the for loop there is no reference to which marker it referring to. You need to assign a listener to each marker individually.
I am trying to make a map using Google Maps API and the red dot icons (aka earthquake icons).
I have several locations and several magnitudes, since some of magnitudes are lower therefore it will not be very visible so the red dot icons only will apply to some locations.
var marker1;
var marker2
for (var i = 0; i < locations.length; i++) {
if (locations[i][3] > 5){
alert("I am in");}
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: getCircle(locations[i][3])
});
if(locations[i][3] < 5){
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation: google.maps.Animation.BOUNCE
});
}
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker1);
}
})(marker1, i));
}
The problem resides on marker1. Because if i try to limit the marker to locations where magnitude is higher than 5 it will not design a single icon and the alert will not even be trigger.
BUT if I remove the code of the marker1 from within the "if" statement (like the example), the alert is triggered and the icons appear on the map.
Marker 2 can be filtered with no problems.
Why is this working this way? I just simply move the "}" a few lines below. I cannot understand.
Thanks for the help!
That code is very complicated, and the way it uses the two global marker1 and marker2 variables, it can't possibly do anything that you want it to do.
I'm not entirely clear what it is you do want the code to do, but can I show you a much cleaner way to code it that may be a step in the right direction?
for( var i = 0; i < locations.length; i++ ) {
addMarker( locations[i] );
}
function addMarker( location ) {
var lat = location[1], lng = location[2],
magnitude = location[3], content = location[0];
var options = {
position: new google.maps.LatLng( lat, lng ),
map: map
};
if( magnitude > 5 ) {
options.icon = getCircle( magnitude );
}
else {
options.animation = google.maps.Animation.BOUNCE;
}
var marker = new google.maps.Marker( options );
google.maps.event.addListener( marker, 'click', function() {
infowindow.setContent( content );
infowindow.open( map, marker );
});
}
Differences worth noting:
No global marker1 and marker2 variables. Instead, every marker has its very own marker variable.
A simple call to the addMarker() method creates the closure you need, instead of the complicated function-returning-a-function.
Use of named variables for all those locations[i][n] properties to make it more readable.
Handles the case where magnitude is exactly 5, which the original code skips. (Change the test from > 5 to >= 5 if needed.)
Combined the two google.maps.Marker() calls to avoid a bit of repetition.
Hopefully that will make it easier to figure out what is going on and what you need to do.