I am having trouble with my Google Maps web app, i am trying to add markers to a map and then when the user clicks on that marker, the name of marker appears.
I store information about each marker in an array like so:
var citymap = {};
citymap['edinburgh'] = {
center: new google.maps.LatLng(55.934120, -3.226569),
population: 284,
image:clueImage,
color: '#ff0000',
elementId:'clue1'
};
citymap['clue2'] = {
center: new google.maps.LatLng(55.970783, -3.164594),
population: 284,
image:clueImage,
color: '#ff0000',
elementId:'clue2'
}
citymap['clue4'] = {
center: new google.maps.LatLng(55.939583, -3.202092),
population: 284,
image:clueImage,
color: '#ff0000',
elementId:'clue3'
}
citymap['clue9'] = {
center: new google.maps.LatLng(0, 0),
population: 284,
image:clueImage,
color: '#ff0000',
elementId:'clue1'
}
I then loop through the array and add the marker to the map:
for (var city in citymap) {
var playerMarker = new google.maps.Marker({
position: citymap[city].center,
map: map,
icon: citymap[city].image
});
google.maps.event.addListener(playerMarker, "click", function() {
var elementConnected = citymap[city].elementId;
console.log(elementConnected);
});
}
Everything works as intended, however when I click on any of the markers, they all log the value of the last marker in the array. I know this is because thats where the loop finished, but I can not think of a way of making this work.
Help would be very helpful!
I think this is the universal "closure" problem in Javascript that people have. Someone might give a better way of doing this, but I think you need something like this:
google.maps.event.addListener(playerMarker, "click", (function() {
return function () {
var elementConnected = citymap[city].elementId;
console.log(elementConnected);
};
})(city));
Or if possible, depending on what else you're doing inside the click event, maybe this:
google.maps.event.addListener(playerMarker, "click", (function(elementId) {
return function () {
var elementConnected = elementId;
console.log(elementConnected);
};
})(citymap[city].elementId));
Related
I am trying to follow this tutorial to create a circle upon map on click event. Here is the initialization of the map under tab1.js:
function initMap() {
forecastmap = new google.maps.Map(document.getElementById('forecastmap'), {
center: {lat: 1.352083, lng: 103.81983600000001},
zoom: 11
});
forecastmap.addListener('click', function(e) {
createBuffer(e.latLng, forecastmap);
});
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
}
Then inside my tab2.js where I perform all the logic to add the markers:
function createBuffer(coord, forecastmap) {
console.log('come in');
var marker = new google.maps.Marker({
position: coord,
map: forecastmap
});
clusterData.push(marker);
marker = new google.maps.Circle({
center: coord,
map: forecastmap,
strokeColor: '#000',
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: '#f0f0f0',
fillOpacity: 0.5,
radius: 20 * 1000
});
clusterData.push(marker);
}
I inserted a dummy message to check if the click event is registered. However, the message did not even printed out. I wonder which part of the code was wrong.
My HTML div:
<div class="box-body">
<div id="forecastmap" style="width:100%;height:350px" onclick="initMap();"></div>
</div>
Thanks!
Note that addListener is not a valid method, and you're either looking for the native addEventListener(), or Google's addDomListener().
I'm not too familiar with Google Maps, but considering the map is generated dynamically, the forecastmap variable may not available on page load. As such, you'll need to hoist the scope to an element that is available on page load, and make use of event delegation.
Instead of:
forecastmap.addListener('click', function(e) {
createBuffer(e.latLng, forecastmap);
});
You probably need something like:
document.getElementsByTagName('body')[0].addEventListener("click", function(e) {
// Check that the click target is #forecastmap
if (e.target && e.target.id == "forecastmap") {
createBuffer(e.latLng, forecastmap);
}
});
Hope this helps! :)
You have a click listener on the map div (the div with id="forecastmap"), that calls the initMap() function (onclick="initMap()"), recreating the map, losing any circle you may have added. If I remove that, and add a google.maps.event.addDomListenerOnce(document.getElementById("forecastmap"), ... that initialized the map on the first click (only), then I get markers and circles.
proof of concept fiddle
code snippet:
var forecastmap;
function initMap() {
forecastmap = new google.maps.Map(document.getElementById('forecastmap'), {
center: {
lat: 1.352083,
lng: 103.81983600000001
},
zoom: 11
});
forecastmap.addListener('click', function(e) {
createBuffer(e.latLng, forecastmap);
});
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
}
// google.maps.event.addDomListener(window, 'load', function() {
google.maps.event.addDomListenerOnce(document.getElementById('forecastmap'), "click", initMap);
// });
function createBuffer(coord, forecastmap) {
console.log('come in');
var marker = new google.maps.Marker({
position: coord,
map: forecastmap
});
// clusterData.push(marker);
marker = new google.maps.Circle({
center: coord,
map: forecastmap,
strokeColor: '#000',
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: '#f0f0f0',
fillOpacity: 0.5,
radius: 20 * 1000
});
// clusterData.push(marker);
}
html,
body,
#forecastmap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="box-body">
<div id="forecastmap" style="width:100%;height:350px"></div>
</div>
This code successfully takes a localStorage place id variable passed from an autocomplete field (can click "Map It" and enter a place in the pop up that appears, at roadtripsharing.com to test), and creates a marker, info window, and circle. I included a default location {lat: 39, lng: -105} in case users accessed the page directly without any localStorage use. However, even when I go from the home page and store something in local storage, the places that come up (in this case ATM machines) are all centered around Colorado Springs, USA, which is the {lat: 39, lng: -105}.
I believe at the point of declaring
var request = {
location: mapit.getCenter(),
radius: 5000,
// query: 'atm'
types: ['atm']
};
mapit.getCenter() should be results[0].geometry.location (the marker location based on the localStorage Place ID passed from the home page). How to make the Place Service Nearby Search result use this as the location instead of always {lat: 39, lng: -105}?
function initMapIt() {
var mapit = new google.maps.Map(document.getElementById('mapitmap'), {
center: {lat: 39, lng: -105},
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var rtscircle = new google.maps.Circle({
radius:document.getElementById("rtsfader").value*1609.34,
strokeWeight: 2,
strokeColor: "blue",
strokeOpacity: 0.9,
fillColor: "red",
fillOpacity: 0.15,
clickable: false,
map: mapit
});
if (localStorage.placetopass !== null){
var rtsgeocoder = new google.maps.Geocoder;
var newplace = localStorage.getItem('placetopass');
rtsgeocoder.geocode({'placeId': newplace}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[0]) {
mapit.setZoom(11);
mapit.setCenter(results[0].geometry.location);
var rtsmarker = new google.maps.Marker({
map: mapit,
position: results[0].geometry.location
});
var rtsinfowindow = new google.maps.InfoWindow;
rtsinfowindow.setContent(results[0].formatted_address+'<p>Rate this place?</p>');
rtsinfowindow.open(mapit, rtsmarker);
rtsmarker.addListener('click', function() {
rtsinfowindow.open(mapit, rtsmarker);
});
rtscircle.setCenter(results[0].geometry.location);
jQuery("#rtsfader").change(function(){
rtscircle.setRadius(document.getElementById("rtsfader").value*1609.34);
});
}
else {
rtscircle.setCenter({lat: 39, lng: -105});
}
} else {
rtscircle.setCenter({lat: 39, lng: -105});
}
});
document.getElementById("rts-aahs").play();
}
var request = {
location: mapit.getCenter(),
radius: 5000,
// query: 'atm'
types: ['atm']
};
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(mapit);
service.nearbySearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
console.log(results[i]);
}
}
else
alert("Status not OK");
}
function createMarker(place) {
// alert("createMarker function");
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: mapit,
position: place.geometry.location
});
console.log(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(mapit, this);
});
}
}
The problem is you are calling mapit.getCenter() before you call mapit.setCenter(results[0].geometry.location). This happens because the you update the map center in the callback of rtsgeocoder.geocode(...), but you don't wait for that to run before continuing with doing the nearbySearch. You can verify this easily by adding a couple of console.log calls just before the getCenter/setCenter calls and observing the order they happen.
To fix this, you could try one of these approaches:
wait for up to some deadline (e.g. 2 seconds) for rtsgeocoder.geocode to run its callback before calling getCenter (and the nearbySearch based on it). This isn't very robust, for example a slow network link could mean it takes more than 2 seconds, and in the meantime you have no markers to show your user.
call nearbySearch from your rtsgeocoder.geocode callback as well as immediately — or even every time the map center is changed. Because adding lots of markers to a map can consume memory and slow down the page you'll probably want to remove the old markers when you get the new ones. For example by keeping an array of of markers added by your createMarker function and call marker.setMap(null) on each of them.
I think option 2 is usually the better choice.
I have a problem with google maps on mobile browsers.
The project I'm working on requires about 500 markers to be shown on a map, but when adding them, the ui freezes.
I'm using markerclusterer to add markers, and performance is fine once the markers are on the page. Is there a way to add the markers asynchronously, or to pause adding markers once the user starts scrolling?
This is the code we're using:
var mcOptions = { gridSize: 50, maxZoom: 15, zoomOnClick: false };
var mc = new MarkerClusterer(context.map, [], mcOptions);
getMarkerLocations().then(function(branches){
branches.forEach(function(branch) => {
var marker = new google.maps.Marker({
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 2,
strokeColor: 'red',
fillColor: 'red',
strokeWeight: 2,
fillOpacity: 1
},
position: new google.maps.LatLng(branch.Latitude, branch.Longitude),
visible: true
});
mc.addMarker(marker);
});
});
Thank you geocodezip, that worked like a charm! For anyone else with the same problem, here's how I fixed it:
.then(function(branches){
var loopFunction = function(branchesToAdd) => {
if (branchesToAdd.length === 0) return;
var item = branchesToAdd.pop();
var marker = new google.maps.Marker({
....
});
mc.addMarker(marker);
setTimeout(function(){loopFunction(branchesToAdd)}, 30);
};
loopFunction(branchesToShow);
});
Add the markers asynchronously, use setTimeout to schedule the addition of each marker, which will give the browser some time to render and respond to the UI.
I've been following the official documentation on how to add markers on the map so far
Nevertheless, I can see only one marker at a time max. If I try to add another one, then it doesn't work (I can't even see the first one).
My process is the following:
I initialize gmaps api:
jQuery(window).ready(function(){
//If we click on Find me Lakes
jQuery("#btnInit").click(initiate_geolocation);
});
function initiate_geolocation() {
if (navigator.geolocation)
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBbfJJVh0jL1X9b7XFDcPuV7nHD1HlfsKs&sensor=true&callback=initialize";
document.body.appendChild(script);
navigator.geolocation.getCurrentPosition(handle_geolocation_query, handle_errors);
}
else
{
yqlgeo.get('visitor', normalize_yql_response);
}
}
Then, I display it on the appropriate div. But when it comes to make the AJAX call, in order to get my locations of the different markers I'd like to display, It just doesn't work properly. Here is the code with a simple map displayed (since that's the only thing working for me so far).
function handle_geolocation_query(position){
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeId: google.maps.MapTypeId.SATELLITE
}
alert('Lat: ' + position.coords.latitude + ' ' +
'Lon: ' + position.coords.longitude);
$('#map-canvas').slideToggle('slow', function(){
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
});
$.when( getLakes(position.coords.latitude, position.coords.longitude)).done(function(results) {
// InitializeGoogleMaps(results);
if(results)
var data = results.map(function (lake) {
//Check if the lake has any open swims, if not, the button will not be clickable and an alert will pop up
if (lake.available>0)
clickable=true;
else
clickable=false;
return {
name: lake.name,
fishs: lake.fisheryType,
swims: lake.swims,
dist: lake.distance,
lat: lake.latitude,
long: lake.longitude,
id: lake.id,
avail: lake.available,
clickable: clickable,
route: Routing.generate('lake_display', { id: lake.id, lat: position.coords.latitude, lng: position.coords.longitude})
}
});
var template = Handlebars.compile( $('#template').html() );
$('#list').append( template(data) );
} );
};
So I'd like to add markers after the AJAX call. I've set up a function that I should call in the when()
function InitializeGoogleMaps(results) {
};
to display the markers in a foreach loop but nope, can't make it work. It looks like this :
CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
marker = new google.maps.Marker({
position: location,
map: map
});
Any help would be great !
Thanks
The main issue is that the map variable is declared only in the scope of the anonymous callback on slideToggle. First of all declare at the top-level function scope.
function handle_geolocation_query(position){
var map,
mapOptions = {
zoom: 14,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeId: google.maps.MapTypeId.SATELLITE
}
...
Then change the slideToggle callback to initialise the variable instead of redeclaring:
$('#map-canvas').slideToggle('slow', function(){
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
});
Then you should pass map as a second parameter to your InitializeGoogleMaps function and call it using InitializeGoogleMaps(results, map). See where this gets you and hit me back with any questions.
I have a map that uses infoBubble.js.
In this map there is an array of locations that I iterate through.
The infoBubble should pop up when the custom icon is clicked but for some reason it only ever opens up the first data item.
Does anyone have an idea as to why that may happen?
I have developed the code for it here;
var arrMarkers = [
['Santiago de Cuba', 20.040450354169483, -75.8331298828125],
['Las Tunas', 20.97682772467435, -76.9482421875],
['Camaguey', 21.39681937408218, -77.9205322265625],
['Playa Santa Lucia', 21.555284406923192, -77.0526123046875],
['Santa Clara', 22.421184710331854, -79.9639892578125],
['Cienfuegos', 22.161970614367977, -80.4473876953125],
['Havana', 23.12520549860231, -82.3919677734375],
['San Cristobel', 22.730590425493833, -83.045654296875],
['Pinar del Rio', 22.43641760076311, -83.69384765625]
];
var arrInfoWindowsCuba = [];
var arrInfoWindows = [];
arrMarkers[i] = marker;
function init() {
var mapCenter = new google.maps.LatLng(21.616579336740603, -78.892822265625);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var image = '/wp-content/themes/Shootcuba/images/map-icon.png';
for (i = 0; i < arrMarkers.length; i++) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(arrMarkers[i][1], arrMarkers[i][2]),
icon: image
});
var infoBubble = new InfoBubble({
content: '<div class="phoneytext">' + arrMarkers[i][0] + '<div class="left-col2"></div></div>',
boxClass: 'info-box',
alignBottom: true,
pixelOffset: new google.maps.Size(-150, -40),
maxWidth: 300,
padding: 0,
closeBoxMargin: '0px',
borderColor: '#ffffff',
borderRadius: '0',
maxWidth: 535,
disableAutoPan: false,
hideCloseButton: false,
backgroundClassName: 'phoney'
});
google.maps.event.addListener(marker, 'click', function () {
infoBubble.open(map, marker, i);
console.log(arrMarkers);
});
arrMarkers[i] = marker;
arrInfoWindowsCuba[i] = infoBubble;
}
}
Here's a working example. I took out a few of the arrays you had (I wasn't entirely sure what they were all for, and they were causing errors in just the snippet you posted), but otherwise is pretty true to what you were doing. The big difference is that I made a separate function for creating the markers. This was mainly done to keep the scope of the click events separate from one another, since the click event always triggering the last event indicates to me that the scopes aren't properly separate.
In particular, what I believe was happening is that the event function you kept overriding values to marker and infoBubble, and the event listener would refer to the current values of those variables, not the values when you first attach the listener. Making a separate function call to maintain the scope for the events strikes me as the cleanest solution.