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
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 have a database of locations which I want to be able to print on a map. Ideally there should be one map with multiple pins for each location you have toggled on. So click a button for location X and it shows up on the map. Click the button for location Y and it shows up on the same map. Click X again and it hides from the map.
Currently I have it so I click on X and the map gets redrawn centered around point X.
Here is the HTML for each button:
<input type='button' data-lat='38.89864400' data-long='-77.05283400'
data-when='20 Aug at 2:00am' value='Location X' class='click' />
The jQuery I'm using is:
jQuery(document).ready(
function initialize() {
jQuery("input.click").click(function() {
showOnMap(jQuery(this).data('lat'), jQuery(this).data('long'), jQuery(this).data('when'));
});
}
);
function showOnMap(lat, long, message) {
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
zoom: 13,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: message
});
google.maps.event.addDomListener(window, 'load', showOnMap);
}
Is there an easy way to switch from what I have to what I want? I've searched for a while but no one seems to be asking this use case in a browser, just Android (which I'm not doing).
Thanks!
There is an example in the documentation on how to hide/show markers. In short, a marker is:
hidden by setting its map to null
showed by setting its map to map
To do so, you will need to access each marker individually. If you have a definite number of locations, it can be done by naming them with different names (eg var markerLocationX, var markerLocationY, etc). Otherwise, the markers need to be stored in an array.
Supposing you have a definite number of known locations to toggle the markers, your javascript code may look like this:
function toggleMarker(markerName) {
if (markerName.getMap() == null) {
markerName.setMap(map);
} else {
markerName.setMap(null);
}
}
I am creating a web app that has 2 instances of Google Maps API: one which has many points, and one which only has one point.
They seem to be conflicting with each other, because when I view one page before the other, the other map is not centered in the correct spot.
First Page:
Second Page:
Here is a link to my project: http://jakeserver.com/Apps/BostonLandmarks/B12/index.html
Here is the code that is generating the Google Maps:
var detailsMap = new google.maps.Map(document.getElementById("map_" + this.id), {
zoom: 10,
center: new google.maps.LatLng(landmarkList[rowCount].landmarkGPSNorth, landmarkList[rowCount].landmarkGPSWest),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var detailsInfoWindow = new google.maps.InfoWindow();
var detailsMarker, j;
detailsMarker = new google.maps.Marker({
position: new google.maps.LatLng(landmarksArray[rowCount].landmarkGPSNorth, landmarksArray[rowCount].landmarkGPSWest),
map: detailsMap,
icon: "Icons/red-pin.pdf"
});
detailsInfoWindow.setContent(landmarksArray[rowCount].landmarkName);
detailsInfoWindow.open(detailsMap, detailsMarker);
google.maps.event.addListener(detailsMarker, 'click', (function(detailsMarker, j) {
return function() {
detailsInfoWindow.open(detailsMap, detailsMarker);
}
})(detailsMarker, j));
}
document.getElementById("map_" + this.id).style.height = 300 + "px";
document.getElementById("map_" + this.id).style.width = 300 + "px";
Any ideas?
A long ago I'd a similar problem with a Ajax-Based navigation in a website, each page had a map, the first one working normally, but the next ones had the same problem you're having.
Before displaying the map you should create a new bound object. Just like this:
var bounds = new google.maps.LatLngBounds();
After that. You've to extend the bounds passing your markers positions. Like this:
bounds.extend(marker.position);
And finally, when the map is actually visible and rendered. Run the following lines.
google.maps.event.trigger(secondMapInstance, 'resize');
secondMapInstance.fitBounds(bounds);
I was trying to center the map at the calculated geographic center and then add markers to show the original points, as well as one for the center but they don't seem to be showing up. When I submit the data to getdata.php it just shows a blank screen. Does anyone see a problem with the javascript for the marker? Any help would be great. Thanks!
Did you check value of location[i]? If you are in default [latitude, longitude], try:
position: new google.maps.LatLng(location[i])
EDITED Try this again:
for(var i = 0; i<(<?php echo json_encode($counter); ?>;); i++ ){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitudesoflocation[i], longitudesoflocation[i]),
map: map,
title: ("Point " + String.fromCharCode(94 + i))
});
There is a typo:
position: new google.maps.LatLng(latitudesoflocation[i],longitudesoflocation[i]);,
//______________________________________________________________________________^
remove the semicolon
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.