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.
Related
I've been looking around for a solution to this problem, but i can't seem to find somthing that solves this. The closest i get is this thread. But this doesn't work.
What i'm trying to do is to run fitbounds based on a set of markers which works fine. But i would also like to center the map based on the users location (the bouncing marker in the plunk) and still keep all markers within the map view.
If i try to setCenter after fitBounds, some markers are outside of the map view.
Is there some nifty way of combining these two functions?
Here's the plunk illustrating the issue.
function initialize() {
var userCenter = new google.maps.LatLng(51.508742, -0.120850);
var userCenterMarker = new google.maps.Marker({
position: userCenter
});
userCenterMarker.setAnimation(google.maps.Animation.BOUNCE);
var mapProp = {
center: userCenter,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var bounds = new google.maps.LatLngBounds();
var markers = getMarkers();
$(markers).each(function() {
bounds.extend(this.position);
this.setMap(map);
});
userCenterMarker.setMap(map);
map.fitBounds(bounds);
setTimeout(function() {
map.setCenter(userCenter);
}, 1500);
}
Thanks!
Simple solution: Add your "user marker" to the bounds, do fitBounds, then decrement the resulting zoom by 1 and center on that marker.
bounds.extend(userCenterMarker.getPosition());
map.fitBounds(bounds);
google.maps.event.addListenerOnce(map,'bounds_changed', function() {
map.setZoom(map.getZoom()-1);
});
working fiddle
More complex solution: Center on the "user marker", check to see if the marker bounds is completely included in the map's current bounds (map.getBounds().contains(markerBounds)), if not, decrement the zoom level by 1.
The above answer didn't work for me. Here's what did:
contained = true;
map.fitBounds(bounds);
map.setCenter(center);
newbounds = map.getBounds();
for (i = 0; i < l; i ++) {
if (!newbounds.contains(markers[i].getPosition())) {
contained = false;
}
}
if (!contained) map.setZoom(map.getZoom() - 1);
I come for help for a javascript problem.
I'm adding a Google map to my website; this map is currently integrated in my page and works fine.
My problem is that i have a lot of markers to place on the map and i want to use a loop to do it.
The coordinates of the markers are stored in a Site[] table.
For now i have this :
// Create markers on the map
for( i = 0; i < Site.length; i++ )
{
var pos = new google.maps.LatLng(Site[i][7], Site[i][8]); //7 and 8 are the latitude and longitude of the markers.
marker = new google.maps.Marker({
position: pos,
map: maCarte, //my map
title: Site[i][1] //1 is the description of the marker
}
});
And, of course, this doesn't work. Does anybody have an idea ?
You messed up with the different parenthesis... If you would indent your code properly, this would be quite obvious.
// Create markers on the map
for (i = 0; i < Site.length; i++) {
var pos = new google.maps.LatLng(Site[i][7], Site[i][8]); //7 and 8 are the latitude and longitude of the markers.
marker = new google.maps.Marker({
position: pos,
map: maCarte, //my map
title: Site[i][1] //1 is the description of the marker
});
}
If it still doesn't work after you corrected this, then problem must be somewhere else. Without knowing the content of the Site array, we can't help any further.
JSFiddle demo
Okay so I am having troubles making the custom markers on my map link to new pages on my website.
Here is my array containing all the needed info about each marker:
var locations = [
['Passage Island', 49.343085, -123.305938, 'tylerkohlhaas.github.io/waterscout/passage.html'],
['Point Atkinson', 49.329925, -123.264994, 'tylerkohlhaas.github.io/waterscout/patkinson.html']
];
And here is my for loop that creates each marker, and should be adding an event listener to each marker:
var markers = [], i;
for(i=0; i < locations.length; i++)
{
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
url: locations[i][3] //not sure why this isn't linking to anything
}));
google.maps.event.addListener(markers, 'click', function(){
window.location.href = markers.url;
});
}
For some reason my markers aren't linking to anything at all. I'm not too sure why. Finding examples for this kind of thing online seem to be few and far between. Any help would be appreciated!
If you need to see more code, here is my github: https://github.com/tylerkohlhaas/waterscout
var locations = [
['Passage Island', 49.343085, -123.305938, 'http://tylerkohlhaas.github.io/waterscout/passage.html'],
['Point Atkinson', 49.329925, -123.264994, 'http://tylerkohlhaas.github.io/waterscout/patkinson.html']
];
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var i;
for(i=0; i < locations.length; i++)
{
var markers = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
url: locations[i][3], //not sure why this isn't linking to anything,
zIndex: 20
});
google.maps.event.addListener(markers, 'click', function(){
window.location.href = markers.url;
console.log("here we go");
});
}
I addead a http:// to the locations and changed your definition of a marker. The EventListener was not working, you can easily do a console.log - also take the z-index into consideration. Works for me now.
best
M
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.)
}
});
When I plug in values for x instead of using a for loop, this code works. But when I use the for loop, the infowindow shows up distorted on the left side of the screen.
What the heel!
for (var x = 0; x < data.page_size; x++) {
var position = new google.maps.LatLng(
data.events.event[x]['latitude'],
data.events.event[x]['longitude']);
marker.push(
new google.maps.Marker({
position: position,
map: map,
icon: image}
));
google.maps.event.addListener(marker[x], 'click', function() {
infowindow.setContent(content[x]);
infowindow.open(map, marker[x]);
});
}
You must use the closure in this case. Like this:
(function(m,c){
google.maps.event.addListener(m, 'click', function() {
infowindow.setContent(c);
infowindow.open(map, m);
});
})(marker[x],content[x])
An economical way to approach this is to make the marker aware of its own index at the cost of just one Number property per marker, and avoiding the need to form a set of closures containing copies of content[x].
for (var x = 0; x < data.page_size; x++) {
...
marker[x].x = x;//make the marker aware of its own index
google.maps.event.addListener(marker[x], 'click', function() {
infowindow.setContent(content[this.x]);
infowindow.open(map, this);
});
}
Providing the marker array and the content array remain static, or are compatibly managed, then this.x will reliably pull out the correct content for each marker.