Forum | Appery.io

Thanks for your help so far guys, your support is fantastic.

Hi guys,

I have another question regard google maps. (sorry for the long post)

To recap:

page show:
preinitialize();/pre

JS file:
prevar directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
console.log('Initializing...');
map = Apperyio("google_map").gmap;

 if (!map) 
 { 
     setDelay(); 
 } 
 else 
 { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 

geolocationTransport.execute();
}
}

function displayDirections(sourceAddress, destinationAddress, map) {
var request = {
origin: sourceAddress,
destination: destinationAddress,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
directionsDisplay.setMap(map);
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert("Directions query unsuccessful. Response status: " + status);
}
});
}

function setDelay()
{
setTimeout(initialize, 50);
}
/pre

This executes the geolocation service, the co-ordincates are mapped to LS variables then on success the JS below is run, as well the service 'get_db_locations' is invoked.

prevar markerLatLng = new google.maps.LatLng(localStorage.getItem('GeoLat'), localStorage.getItem('GeoLng'));

var marker = new google.maps.Marker({
position: markerLatLng,
map: map,
// icon: custom image will go here
animation: google.maps.Animation.DROP
});

bounds.extend(markerLatLng);
map.fitBounds(bounds);/pre

This places a marker for the users location.

get_db_locations is a list service to the collection with multiple rows, containing the columns; Name, City, Type, and Address.

there is no mapping on get_db_locations. On success the JS is run:
pre
for (var i = 0; i < data&#46;length; i++)
{

 convert_address2.execute({ 
     'data' : { 
         'address' : data[i].address, 
         'sensor' : false 

}
});
}
/pre

convert_address2 is googles converting services. There is no mapping, but there is JS on success:
pre var markerLatLng = new google&#46;maps&#46;LatLng(localStorage&#46;getItem('markerLat'), localStorage&#46;getItem('markerLng'));

var marker = new google&#46;maps&#46;Marker({
position: markerLatLng,
map: map,
title: data&#46;results[0]&#46;formatted_address,
animation: google&#46;maps&#46;Animation&#46;DROP
});

google&#46;maps&#46;event&#46;addListener(marker, 'click', function() {
infowindow&#46;open(map,marker);
});

bounds&#46;extend(markerLatLng);
map&#46;fitBounds(bounds);
/pre

This works perfectly, when the page shows the map loads, the users geoloaction is mapped, then the addresses of the database locations are converted to lat and long coordinates then markers are placed on the map of those locations.

So the overall result is a map with markers for the users geolcation and the locations from the database...Lovely.

The only problem is I cant figure out how to add info windows to the locations from the database, I want the info window to contain 'Name' of the location, the 'Name' is a column is in the collection.

I know I need to add this JS to the convert_address2 success event:
pre

var infowindow = new google&#46;maps&#46;InfoWindow({
content:
});

google&#46;maps&#46;event&#46;addListener(marker, 'click', function() {
infowindow&#46;open(map,marker);
});
}
/pre

I don't know how to make the content the 'Name' for each marker.

My aim is to have a map with markers for the users location and the locations on the database, that when clicked bring up an info window containing that locations 'Name'.

Any Idea's how this can be achieved?

Thanks,

Joe

Hi Joe,

Really long post

Please learn following code. That's exactly what you need. Just modify it with your context.

pre

 //Were "multiGoogleMap" is map component name. 
 var map = Appery("multiGoogleMap").options.mapElement.gmap('get', 'map'); 

&#47;&#47;Create infowindow&#46;
var infowindow = new google&#46;maps&#46;InfoWindow({
content: 'test content',
maxWidth: 320
});

 var CreateMarker = function(data){ 
     var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(data.lat, data.long), 
         map: map, 
         draggable: true, 

         title: data.location 
     }); 

     //Add event handler and open infoWindow 
     google.maps.event.addListener(marker, 'click', function() { 
         //Set content for infowindow. 
         infowindow.setContent('Content of + ' + data.location + ''); 

         //Open infowindow. 
         infowindow.open(map, marker); 
     }); 
 }; 

 for (var i = 0; i < locationHelper&#46;aLocations&#46;length; i++) 
     &#47;&#47;In this function you should to pass latitude, longitude and text to display in infowindow&#46; 
     CreateMarker({lat: locationHelper&#46;aLocations[i][0], long: locationHelper&#46;aLocations[i][1], location:  locationHelper&#46;aLocations[i][2]}); 

/pre

Regards.

Thank you Yurii

Does this code need separating on the 2 different services?

the marker gets it position from the 'convert_data2' service
pre position: new google&#46;maps&#46;LatLng(data&#46;lat, data&#46;long)/pre

and the info window content gets its content from 'get_db_locations' service
pre infowindow&#46;setContent('Content of + ' + data&#46;location + '');/pre

Hi Joe,

At first, sorry, code should be(there is some tags inside that was mutable by GS) :

precode

 //Were "multiGoogleMap" is map component name. 
 var map = Appery("multiGoogleMap").options.mapElement.gmap('get', 'map'); 

&#47;&#47;Create infowindow&#46;
var infowindow = new google&#46;maps&#46;InfoWindow({
content: '<div style="height:80px;">test content<>',
maxWidth: 320
});

 var CreateMarker = function(data){ 
     var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(data.lat, data.long), 
         map: map, 
         draggable: true, 

         title: data.location 
     }); 

     //Add event handler and open infoWindow 
     google.maps.event.addListener(marker, 'click', function() { 
         //Set content for infowindow. 
         infowindow&#46;setContent('<div style="height:80px;">Content of + ' + data&#46;location + '<>'); 

         &#47;&#47;Open infowindow&#46; 
         infowindow&#46;open(map, marker); 
     }); 
 }; 

 for (var i = 0; i < locationHelper&#46;aLocations&#46;length; i++) 
     &#47;&#47;In this function you should to pass latitude, longitude and text to display in infowindow&#46; 
     CreateMarker({lat: locationHelper&#46;aLocations[i][0], long: locationHelper&#46;aLocations[i][1], location:  locationHelper&#46;aLocations[i][2]}); 

/code/pre

In given code all markers created with code in below:

pre

 for (var i = 0; i < locationHelper&#46;aLocations&#46;length; i++) 
     &#47;&#47;In this function you should to pass latitude, longitude and text to display in infowindow&#46; 
     CreateMarker({lat: locationHelper&#46;aLocations[i][0], long: locationHelper&#46;aLocations[i][1], location:  locationHelper&#46;aLocations[i][2]}); 

/pre

So you can use "CreateMarker" function like you need. There you should pass object with following parameters inside:

lat - latitude,
long - longitude,
location - content of infowindow for current marker.

Regards.

I'm getting the error:
Uncaught ReferenceError: locationHelper is not defined

Also I dont want the content of the infowindow to be the .location from the convert service.

I have unique information in my database that I want as the content window. It is the 'Name' response of the 'get_db_locations'.

Would it be easier to achieve this by storing latitude and longitude values in my database rather than using googles convert service?

Hi Joe,

Please learn given code.

To simply understand how it works please replace following code:

pre

 for (var i = 0; i < locationHelper&#46;aLocations&#46;length; i++) 
     &#47;&#47;In this function you should to pass latitude, longitude and text to display in infowindow&#46; 
     CreateMarker({lat: locationHelper&#46;aLocations[i][0], long: locationHelper&#46;aLocations[i][1], location:  locationHelper&#46;aLocations[i][2]}); 

/pre

With:

pre

var lat = 30;
var long = 40;
var infowindowText = "Hello this is infowindow text";

&#47;&#47;In this function you should to pass latitude, longitude and text to display in infowindow&#46;
CreateMarker({lat: lat, long: long, location: infowindowText });

/pre

This code will add marker with coordinates: "30, 40" and when you click on marker it will open "infowindow" with text "Hello this is infowindow text".

Regards.

Hi Yurii,

Thank you for your help. I struggled to implement your solution, probably because of my lack of experience and knowledge. Although I have learnt a lot from your replies.

Instead of using googles convert service I decided to store the lat and long values in the database.

I used the same get_db_locations service but changed the code on success
to execute a list service with where parameter:
prefor (var i = 0; i < data&#46;length; i++)
{

test_list_location.execute({ 
     'data' : { 
         'where' : {"_id":data[i]._id} 
          } 
 }); 

}/pre

and on success of 'test_list_location' service the JS s run to place the markers:
prevar markerLatLng = new google&#46;maps&#46;LatLng(localStorage&#46;getItem('markerLat'), localStorage&#46;getItem('markerLng'));

var type = data[0]&#46;Type;

var marker = new google&#46;maps&#46;Marker({
position: markerLatLng,
map: map,
animation: google&#46;maps&#46;Animation&#46;DROP,

});

var infowindow = new google&#46;maps&#46;InfoWindow({
content: data[0]&#46;Name,
maxWidth: 120
});

google&#46;maps&#46;event&#46;addListener(marker, 'click', function() {
infowindow&#46;open(map,marker);
});

bounds&#46;extend(markerLatLng);
map&#46;fitBounds(bounds);/pre

This works as I wanted it to, placing the 'Name' field in infowindow.

Now I have a map with markers for all my database rows that when clicked bring up infowindows.

I'm now wanting to add a button or clickable element, to the info window that when clicked will set the localStorage Item 'DestinationAddress' with the latlng of the clicked marker.

how can do this?

Thank you

Hello,

1) Copy whole html from infowindow;
2) Add html that embodies your button functionality;
3) Set new infowindow content.