Google maps in AB1

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Take a look at some frequently asked questions about us and our products!

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

Peter Bradstreet

Hi David,

I hope that you are well. I am struggling with Google maps a bit and I was wondering if you would mind taking a quick look at my code. I am working originally from the Google Maps 3 sample and have it working with showing a single marker which then shows an infowindow on mouseover.

I am now trying to run a query in Firebase to return a number of records that I want to show as multiple markers on the map. Initially, I am just tryng to show markers for a series of manually stored locations and once I have it working, I will switch it to using dynamic data.

I am having an issue with the correct syntax for converting some code that I found online to be accepted by the AB code editor. Here is the code: StartJS window.App.GoogleMap = {}; angular.element(document).ready(function () { window.App.GoogleMap.Map = new google.maps.Map( document.getElementById('HtmlContent1'), { zoom: 1, center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.terrain, fullscreenControl: false, streetViewControl: false , styles: [{ "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{ "color": "#444444" }] }, { "featureType": "landscape", "elementType": "all", "stylers": [{ "color": "#f2f2f2" }] }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "off" }] }, { "featureType": "road", "elementType": "all", "stylers": [{ "saturation": -100 }, { "lightness": 45 }] }, { "featureType": "road.highway", "elementType": "all", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "elementType": "all", "stylers": [{ "visibility": "off" }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "color": "#bae6f7" }, { "visibility": "on" }] }] } ); var locations = [ ['Test location1', 20.890542, -105.274856, 4], ['Test location2', 20.923036, -105.259052, 5], ['Test location3', 20.028249, -105.157507, 3], ['Test location4', 20.80010128657071, -105.28747820854187, 2], ['Test location5', 20.950198, -105.259302, 1] ]; var markers = []; var num_markers = locations.length; for (var i = 0; i < num_markers; i++) { window.App.GoogleMap.markers[i] = new google.maps.Marker({ position: {lat:locations[i][1], lng:locations[i][2]}, map: window.App.GoogleMap.Map, html: locations[i][0], id: i, }); console.log(num_markers+' locations'); // window.App.GoogleMap.Marker = new google.maps.Marker({map: window.App.GoogleMap.Map}); // var latlng = new google.maps.LatLng(20.74923368851367,-105.37793475306216); // window.App.GoogleMap.Marker.setPosition(latlng,latlng); // window.App.GoogleMap.Map.setZoom(16); // window.App.GoogleMap.Map.panTo(window.App.GoogleMap.Marker.position); // window.App.GoogleMap.Map.panTo(latlng); // window.App.RootScope.$apply(); // }); EndJS

The specific section that is obviously wrong and won't compile is this portion:

for (var i = 0; i < num_markers; i++) {
    window.App.GoogleMap.markers[i] = new google.maps.Marker({
      position: {lat:locations[i][1], lng:locations[i][2]},
      map: window.App.GoogleMap.Map,
      html: locations[i][0],
      id: i,
    });

Any assistance would be greatly appreciated! ...Pete

decsoft

Hello Peter,

If we talk specifically about the code that you shown, certainly there is a syntax error: a missing end bracket in the "for":

for (var i = 0; i < num_markers; i++) {
  window.App.GoogleMap.markers[i] = new google.maps.Marker({
    position: {lat:locations[i][1], lng:locations[i][2]},
    map: window.App.GoogleMap.Map,
    html: locations[i][0],
    id: i,
  });
} // This bracket is missing in your code

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Thanks! I should have seen that.

Pete

decsoft

Glad to know that you finally got it Peter! ;-)

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi David,

Still pounding away on Google maps and I have it working so that if you click on a map marker it pops up an infowindow that displays html content. In that content I want to have a button that takes the user to a different AB view. I was thinking that the best way to do this was to place a hidden button (HiddenButton1) on the map view and then have the button in the infowindow trigger the hidden button to go to the details view.

The js code snippet that sets the content of the infowindow is as follows:

var contentString = '<b>Vessel: '+vesselname+'<br>Type: '+vesseltype+'<br>Model: '+vesselmodel+'<br>Position Updated: '+vesselgeoupdated+'<br><img src='+vesselimage+' width="250" ><br><br><button type="buttton" onclick="document.getElementById(\'"HiddenButton1"\').click();" style="background-color:#09cac7;border-radius: 20px;color:#ffffff;padding:10px;">Boat Details</button></b>';

When I click on the button in the marker infowindow I get the following console error: "SyntaxError: '' string literal contains an unescaped line break".

I was wondering whether this is the right approach and if so, what the correct syntax would be for the infowindow button or whether I am totally off base and there is a better way to handle this?

Thanks!
Pete

decsoft

Hello Peter,

Checking your code in this online tool, apparently there is no problem. So, I suspect that maybe a code like that (particularly the "onclick" event) can cause some problems... or... anyway... maybe it's required more information about, a possible sample app to reproduce the problem, for example.

However, I think there is a better approach: identify the button, place some information inside in a "data" attribute (optionally, I do it below because I like it), and then, use a jQuery event delegate in order to be ready for the button's click. Doing that, we no need to place any event in the button itself, which can cause undesired problems like you experience.

The below code is all what we need, and, can be placed in the app view Show event, in order to initialize the map, place a sample marker, and prepare the appropriate marker's info window, with a button inside, which go to another app view when it's pressed.

StartJS

  // Create our map

  window.App.RootScope.Map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    //mapTypeId: 'satellite',
    center: {lat: 36.703306, lng: -4.452712},
    disableDefaultUI: true,
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    rotateControl: true,
    fullscreenControl: true,
    //gestureHandling: 'cooperative',
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['satellite', 'roadmap', 'terrain', 'hybrid']
    },
    styles: [{
      elementType: 'labels.icon',
      stylers: [{visibility: 'off'}]
    }]
  });

  // Prepare our marker

  var
    marker = new google.maps.Marker({
      position: {lat: 36.703306, lng: -4.452712},
      map: window.App.RootScope.Map,
      title: 'Hello marker!'
    });

  // Use a function to show the marker's info window

  var
    showInfoWindow = function(marker) {
      var
        contentStr = '<div>';

      // Prepare the content of the window, in this sample, just a button, which identify the view
      // to go using the "view-name" data attribute. See bellow the "goto-view-button" event handler.

      contentStr = '<button data-view-name="View2" class="goto-view-button btn btn-sm btn-primary">Goto View2</button>';

      contentStr += '</div>';

      window.App.RootScope.MapWindow = new google.maps.InfoWindow({
        content: contentStr
      });
      window.App.RootScope.MapWindow.open(window.App.RootScope.Map, marker);
    };

  // Prepare a click handler for our marker

  marker.addListener('click', function() {

    // And show our marker's info window when the marker is clicked
    showInfoWindow(this);
  });

  // Finally, this is an event delegate for all the existing ".goto-view-button"

  $('body').on('click', '.goto-view-button', function () {

    // Use the "view-name" data attribute to go the right app view
    $scope.showView($(this).data('view-name'));
  });

EndJS

Below you have the complete sample app for AB1: save the XML into a "MyApp.ab" file, and open it with AB:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.56">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Width>320</Width>
    <Height>480</Height>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <Created>2020-02-13T20:02:18.524</Created>
    <Modified>2020-02-13T20:47:36.185</Modified>
    <InlineCSS>
      <![CDATA[
#map
{
  width: 100%;
  height: 100%;
}]]>
    </InlineCSS>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap />
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
StartJS

  // Create our map

  window.App.RootScope.Map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    //mapTypeId: 'satellite',
    center: {lat: 36.703306, lng: -4.452712},
    disableDefaultUI: true,
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    rotateControl: true,
    fullscreenControl: true,
    //gestureHandling: 'cooperative',
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['satellite', 'roadmap', 'terrain', 'hybrid']
    },
    styles: [{
      elementType: 'labels.icon',
      stylers: [{visibility: 'off'}]
    }]
  });

  // Prepare our marker

  var
    marker = new google.maps.Marker({
      position: {lat: 36.703306, lng: -4.452712},
      map: window.App.RootScope.Map,
      title: 'Hello marker!'
    });

  // Use a function to show the marker's info window

  var
    showInfoWindow = function(marker) {
      var
        contentStr = '<div>';

      // Prepare the content of the window, in this sample, just a button, which identify the view
      // to go using the "view-name" data attribute. See bellow the "goto-view-button" event handler.

      contentStr = '<button data-view-name="View2" class="goto-view-button btn btn-sm btn-primary">Goto View2</button>';

      contentStr += '</div>';

      window.App.RootScope.MapWindow = new google.maps.InfoWindow({
        content: contentStr
      });
      window.App.RootScope.MapWindow.open(window.App.RootScope.Map, marker);
    };

  // Prepare a click handler for our marker

  marker.addListener('click', function() {

    // And show our marker's info window when the marker is clicked
    showInfoWindow(this);
  });

  // Finally, this is an event delegate for all the existing ".goto-view-button"

  $('body').on('click', '.goto-view-button', function () {

    // Use the "view-name" data attribute to go the right app view
    $scope.showView($(this).data('view-name'));
  });

EndJS]]>
      </ShowEvent>
      <Controls>
        <Control Role="6001">
          <Name>HtmlContent1</Name>
          <Top>16</Top>
          <Left>16</Left>
          <Width>288</Width>
          <Height>448</Height>
          <Html>
            <![CDATA[
<div id="map"></div>]]>
          </Html>
        </Control>
      </Controls>
    </View>
    <View>
      <Name>View2</Name>
      <Controls>
        <Control Role="2001">
          <Name>Button2</Name>
          <Top>136</Top>
          <Left>56</Left>
          <Width>200</Width>
          <Height>40</Height>
          <Text>
            <![CDATA[Back to View1]]>
          </Text>
          <Kind>primary</Kind>
          <TabIndex>0</TabIndex>
          <ClickEvent>
            <![CDATA[
ShowView "View1"]]>
          </ClickEvent>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts>
      <Path Query="">https://maps.googleapis.com/maps/api/js</Path>
    </Scripts>
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.56 (2/10/2020)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2020 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Remember to set your Google Maps API key (using the app Files Manager).

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi David,

As always you went above and beyond, thanks for the help!! I have your sample working so I will dissect it and apply your approach to my app.

Thanks again!
Pete

decsoft

No problem, Peter! Thanks for your kindly words! :-)

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi David,

I am making good progress on the Google mapping stuff and have maps that are showing single markers with popup info windows that contain a more details link that takes the user to another view with the relevant details. (Thanks for your help in getting that working)

I am now working on a view that returns a firebase query of vessels and displays each of them as a marker in the view google map.

I have multiple markers showing right now in the map but the markers are defined in a manually coded array

var locations = [
      ['Vessel 4', 20.749, -105.38, 'This is the description for Vessel 4'],
      ['Vessel 5', 20.748, -105.38, 'This is the description for Vessel 5'],
      ['Vessel 3', 20.7492336885134 ,-105.375, 'This is the description for Vessel 3'],
      ['Vessel 2', 20.747, -105.374, 'This is the description for Vessel 2'],
      ['Vessel 1', 20.748, -105.373, 'This is the description for Vessel 2']
    ];

My query results however are returned as objects rather than an array and I am at a loss how to create a similar array as above but with the returned object data.

Below you can see the code in the view code that returns the objects and you can see that I am currently writing the results to the console which is shown in the bottom code block.

var db = firebase.firestore();
var vesseltoken = window.App.RootScope.vtoken;
window.App.RootScope.Fleet_Report.Data = [];
db.collection("vessels").where("Fleets", "array-contains",(vesseltoken)).orderBy("VesselName","asc").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
window.App.RootScope.Fleet_Report.Data.push(doc.data());
console.log(doc.data());});

Here is the console log text:

[object Object]: {Beam: "8", Draft: "3' 6"", Fleets: Array, GeoUpdated: "Dec 31st 2019, 7:35 am", Latitude: 20.74923368851367...}
Beam: "8"
Draft: "3' 6""

Fleets: Array
GeoUpdated: "Dec 31st 2019, 7:35 am"
Latitude: 20.74923368851367
Length: "23"
Longitude: -105.37793475306219
Manufacturer: "Grampian"
Model: "Grampian 23"
Owners: "Crazy Boater & Anxious Wife"
VesselEmail: "peter@dockit.app"
VesselID: "56414902"
VesselImage: ""
VesselName: "Misty Too"
VesselType: "Power"

__proto__: Object


[object Object]: {Beam: "11.5 Feet", Comment: "Our lancer 36 is a great boat.", Fleets: Array, GeoUpdated: "Mar 2nd 2020, 5:11 pm", Latitude: 20.7543767...}
Beam: "11.5 Feet"
Comment: "Our lancer 36 is a great boat."

Fleets: Array
GeoUpdated: "Mar 2nd 2020, 5:11 pm"
Latitude: 20.7543767
Length: "36. 5 Feet"
Longitude: -105.3756743
Manufacturer: "Lancer"
Model: "Lancer 36"
Owners: "John & Jane Doe"
VesselEmail: "peter@creativeinterface.com"
VesselID: "55894744"
VesselImage: ""
VesselName: "Never Say Never"
VesselType: "Sail"

__proto__: Object

Any advice on converting the returned objects to an array would be hugely appreciated!

Cheers, Pete

Peter Bradstreet

Not sure if it is useful, but here is the full view show code:

SetVar "[AppHeaderTitle]" "My Fleet - Map" "String"
SetStyle "Button_MyLocation" "left" "75px"
SetStyle "Button_MyLocation" "top" "5px"
SetStyle "Button_MyLocation" "height" "30px"
SetStyle "Button_MyLocation" "padding-top" "2px"
SetStyle "Button_MyLocation" "width" "auto"
SetStyle "Button_MyLocation" "padding" "5px 15px 5px 15px"
SetStyle "Button_MyLocation" "border-radius" "15px"
SetStyle "Button_MyLocation" "text-align" "center"
SetStyle "MapHtml_Fleet" "top" "0px"
SetStyle "ContainerFleet" "top" "50px"
GetOption "dockit_vname" "vessel_name"

StartJS
//window.App.RootScope.VLocation.getGeolocation();
var db = firebase.firestore();
var vesseltoken = window.App.RootScope.vtoken;
window.App.RootScope.Fleet_Report.Data = [];
db.collection("vessels").where("Fleets", "array-contains",(vesseltoken)).orderBy("VesselName","asc").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
window.App.RootScope.Fleet_Report.Data.push(doc.data());
console.log(doc.data());});

$scope.$apply();
});
var locations = [
      ['Vessel 4', 20.749, -105.38, 'This is the description for Vessel 4'],
      ['Vessel 5', 20.748, -105.38, 'This is the description for Vessel 5'],
      ['Vessel 3', 20.7492336885134 ,-105.375, 'This is the description for Vessel 3'],
      ['Vessel 2', 20.747, -105.374, 'This is the description for Vessel 2'],
      ['Vessel 1', 20.748, -105.373, 'This is the description for Vessel 2']
    ];
  window.App.GoogleMap = {};

  angular.element(document).ready(function () {

    window.App.GoogleMap.Map = new google.maps.Map(
      document.getElementById('MapHtml_Fleet'),
      {
        zoom: 1,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: google.maps.MapTypeId.terrain,
        fullscreenControl: false,
                mapTypeControl: false,
                streetViewControl: false,
                styles: [{
                    "featureType": "administrative",
                    "elementType": "labels.text.fill",
                    "stylers": [{
                        "color": "#444444"
                    }]
                }, {
                    "featureType": "landscape",
                    "elementType": "all",
                    "stylers": [{
                        "color": "#f2f2f2"
                    }]
                }, {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": [{
                        "visibility": "off"
                    }]
                }, {
                    "featureType": "road",
                    "elementType": "all",
                    "stylers": [{
                        "saturation": -100
                    }, {
                        "lightness": 45
                    }]
                }, {
                    "featureType": "road.highway",
                    "elementType": "all",
                    "stylers": [{
                        "visibility": "simplified"
                    }]
                }, {
                    "featureType": "road.arterial",
                    "elementType": "labels.icon",
                    "stylers": [{
                        "visibility": "off"
                    }]
                }, {
                    "featureType": "transit",
                    "elementType": "all",
                    "stylers": [{
                        "visibility": "off"
                    }]
                }, {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": [{
                        "color": "#bae6f7"
                    }, {
                        "visibility": "on"
                    }] }]}   );
var myvesselname = window.App.RootScope.vessel_name;
    window.App.GoogleMap.Marker = new google.maps.Marker({
      map: window.App.GoogleMap.Map,
      label: {text:myvesselname,color:'#005477',fontSize: "12px"},
       icon: {url:'https://dockit-secure.app/iPort/dockit_images/Marker-MyVessel.png',labelOrigin: new google.maps.Point(20, -7)},
      animation: google.maps.Animation.DROP
    });


var marker, i;

    for (i = 0; i < locations.length; i++) {
    var item = locations[i];
      marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: window.App.GoogleMap.Map,
      icon: {url:'https://dockit-secure.app/iPort/dockit_images/Marker-Sail.png',
      labelOrigin: new google.maps.Point(20, -7)},
      animation: google.maps.Animation.DROP,
      label: {text: item[0],color:'#005477',
      fontWeight: 'bold',fontSize: "12px"},title: item[3]
      });
}


       window.App.RootScope.$apply();
//     });

    window.App.RootScope.Location.getGeolocation();
  });

EndJS

decsoft

Hello Peter,

I am not completely sure about the specific source objects, but, figure out that you have an Array of Objects variable (apparently this is the source), and, what you wanted is an Array of Arrays variable (this is what the "locations" variable is), take a look at the below code, which I hope that can help you giving you the idea of what you must to do:

App Builder's code:

// Create a sample source Array variable
NewArray "[SourceObjects]"

// Create an Object variable
NewObject "[AnObject]"
ObjectSetProp "[AnObject]" "Name" "Marker 1"
ObjectSetProp "[AnObject]" "Latitude" "12"
ObjectSetProp "[AnObject]" "Longitude" "34"
// Add the object into the Array
ArrayPush "[SourceObjects]" "[AnObject]"

// Create another Object variable
NewObject "[AnObject]"
ObjectSetProp "[AnObject]" "Name" "Marker 2"
ObjectSetProp "[AnObject]" "Latitude" "56"
ObjectSetProp "[AnObject]" "Longitude" "78"
// Add the object into the Array
ArrayPush "[SourceObjects]" "[AnObject]"

// Here we have a sample [SourceObjects] Array of objects,
// variable, so let's go an iterate it

// Create a sample destiny Array of arrays variable
NewArray "[DestinyArray]"

ArrayLength "[SourceObjects]" "[TotalSourceObjects]"
Dec "[TotalSourceObjects]"

// Iterate the source Array of objects variable
Loop "0" "[TotalSourceObjects]" "[I]"

  // Get the object in the source Array we are iterating
  ArrayGetItem "[SourceObjects]" "[I]" "[ObjectItem]"

  // Prepare our Array item to be added in the destiny Array
  NewArray "[DestinyArrayItem]"
  ArrayPush "[DestinyArrayItem]" "[ObjectItem.Name]"
  ArrayPush "[DestinyArrayItem]" "[ObjectItem.Latitude]"
  ArrayPush "[DestinyArrayItem]" "[ObjectItem.Longitude]"

  // Add the Array item into the destiny Array
  ArrayPush "[DestinyArray]" "[DestinyArrayItem]"
EndIf

// Take a look at the destinty Array at the browser's developer console
StartJS
  window.console.clear();
EndJS
Console "[DestinyArray]" "info"

JavaScript code:


StartJS

  // Create a sample source Array of objects variable
  window.App.RootScope.SourceObjects = [
   { "Name": "Marker 1", "Latitude": 12, "Longitude": 34 },
   { "Name": "Marker 2", "Latitude": 56, "Longitude": 78 }
  ];

  // Create a sample destiny Array of arrays variable
  window.App.RootScope.DestinyArray = [];

  // Iterate the source Array of objects variable
  for (var i = 0; i < window.App.RootScope.SourceObjects.length; i++) {

    var
      objectItem = window.App.RootScope.SourceObjects[i];

    // Add the Array item into the destiny Array
    window.App.RootScope.DestinyArray.push(
     [objectItem.Name, objectItem.Latitude, objectItem.Longitude]
    );
  }

  //
  window.console.clear();
  window.console.info(window.App.RootScope.DestinyArray);

EndJS

Both pieces of codes produces the same result.

Note for the readers: the above App Builder code refers to the previous generation of the DecSoft App Builder. The new generation of DecSoft App Builder don't provide "actions" like the previous generation do, but we can directly write JavaScript code instead.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi David,

Thanks for your help, I feel that I am close but am getting an undefined error.I went with your js example:

// Create a sample source Array variable
NewArray "[SourceObjects]"

// Create an Object variable
NewObject "[AnObject]"
ObjectSetProp "[AnObject]" "Name" "Marker 1"
ObjectSetProp "[AnObject]" "Latitude" "12"
ObjectSetProp "[AnObject]" "Longitude" "34"
// Add the object into the Array
ArrayPush "[SourceObjects]" "[AnObject]"

// Create another Object variable
NewObject "[AnObject]"
ObjectSetProp "[AnObject]" "Name" "Marker 2"
ObjectSetProp "[AnObject]" "Latitude" "56"
ObjectSetProp "[AnObject]" "Longitude" "78"
// Add the object into the Array
ArrayPush "[SourceObjects]" "[AnObject]"

// Here we have a sample [SourceObjects] Array of objects,
// variable, so let's go an iterate it

// Create a sample destiny Array of arrays variable
NewArray "[DestinyArray]"

ArrayLength "[SourceObjects]" "[TotalSourceObjects]"
Dec "[TotalSourceObjects]"

// Iterate the source Array of objects variable
Loop "0" "[TotalSourceObjects]" "[I]"

  // Get the object in the source Array we are iterating
  ArrayGetItem "[SourceObjects]" "[I]" "[ObjectItem]"

  // Prepare our Array item to be added in the destiny Array
  NewArray "[DestinyArrayItem]"
  ArrayPush "[DestinyArrayItem]" "[ObjectItem.Name]"
  ArrayPush "[DestinyArrayItem]" "[ObjectItem.Latitude]"
  ArrayPush "[DestinyArrayItem]" "[ObjectItem.Longitude]"

  // Add the Array item into the destiny Array
  ArrayPush "[DestinyArray]" "[DestinyArrayItem]"
EndIf

// Take a look at the destinty Array at the browser's developer console
StartJS
  window.console.clear();
EndJS
Console "[DestinyArray]" "info"

I tried to replace your sample array source with the objects returned from the firebase query:

StartJS
var db = firebase.firestore();
var vesseltoken = window.App.RootScope.vtoken;
window.App.RootScope.Fleet_Report.Data = [];
db.collection("vessels").where("Fleets", "array-contains",(vesseltoken)).orderBy("VesselName","asc").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
window.App.RootScope.SourceObjects=doc.data();
var objectsource =window.App.RootScope.SourceObjects;
console.log(window.App.RootScope.SourceObjects);

});

});


 window.App.RootScope.DestinyArray = [];

for (var i = 0; i < window.App.RootScope.SourceObjects.length; i++) {

    var
      objectItem = objectsource[i];

  
    window.App.RootScope.DestinyArray.push(
     [objectItem.Name, objectItem.Latitude, objectItem.Longitude]
    );
   }
// 
// 
   window.console.clear();
  window.console.info(window.App.RootScope.DestinyArray);
$scope.$apply();
EndJS

The results of the console log: console.log(window.App.RootScope.SourceObjects); is returning what appears to be valid objects:

{…}

Beam: "8"

Draft: "3' 6\""

Fleets: Array [ "56413073", "55894744" ]

GeoUpdated: "Dec 31st 2019, 7:35 am"

Latitude: 20.74923368851367

Length: "23"

Longitude: -105.37793475306219

Manufacturer: "Grampian"

Model: "Grampian 23"

Owners: "Crazy Boater & Anxious Wife"

VesselEmail: "peter@dockit.app"

VesselID: "56414902"

VesselImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAFACAIAAABC8jL9AAAACXBIWXMAAAsSAAALEgHS3X78AAAgAElEQVR4nOxdd3xUVdo+907vPZNGSKWzShULlhXcVWzrWnbFXcuqqKgrfrq2D1hcsYC6WEBdRdRVVHCxUkQ6CCssEAIJIaT3yUwyyfR2535/vJvzXWcmk0kyycwk5/kjv8nMLeeee55z3vNWimVZREBAkJqgE90AAgKC/oMQmIAghUEITECQwiAEJiBIYRACExCkMAiBCQhSGITABAQpDEJgAoIUBiEwAUEKgxCYgCCFQQhMQJDCIAQmIEhhEAITEKQwCIEJCFIYhMAEBCkMQmACghQGITABQQqDEJiAIIVBCExAkMIgBCZAwWAw0U0g6CcoktSOACHEsixFUYluBUGfQVZgAoQQAvaSpTjlQAg8cgF09Xq9jz322JEjRxBCNE3GQ4qBvLCRDpFI5Pf7n3rqqTVr1gQCAfiSLMWpAkJgAqTRaKZOnXrkyJE///nPXq8XIUTTNFGOpAQIgQmQ1+ulKGrSpEnBYPCRRx7Zvn07QoiiKLIOJz8IgQkQj8cLBAJOp9NoNKpUqvfff/+NN95A3VtiQuNkBiEwAUIIMQwDS65MJhs7duzx48cffPBBrNki4nTSghCY4P8RDAZ5PJ5CoRg9erRIJHr55ZdXr16Nuo1MBEkIfqIbQJBEoGna6/V6PB4ej6fVahUKxaFDh0wm07PPPpvophFEBlmBCf4LlmVpmhaJRFKplKIov9/PsmxRUVFra+u9995rtVrhMLIlTioQAhP8P2iaDgQCLpeLYRjY9waDwZycHIlE8sADD+zfvx+OIRxOHhARmuC/oCgKHDkoisKbXvCR1ul0Uqn0rbfecjgcV155Jai1yMY4GUAITPAzhNMyGAz6fD6tVisQCD744AOz2fzHP/6RsDdJQERogl4QDAZFIlFXV5dAIJgwYc…"

VesselName: "Misty Too"

VesselType: "Power"

<prototype>: Object { … }
app.js:19905:9
{…}

Beam: "11.5 Feet"

Comment: "Our lancer 36 is a great boat. \nNow is the time for all good men to come to the aid of their party. Now is the time for all good men to come to the aid of their party. Now is the time for all good men to come to the aid of their party. Now is the time for all good men to come to the aid of their party. \n\nNow is the time for all good men to come to the aid of their party. Now is the time for all good men to come to the aid of their party."

Fleets: Array [ "56413073" ]

GeoUpdated: "Mar 2nd 2020, 5:11 pm"

Latitude: 20.7543767

Length: "36. 5 Feet"

Longitude: -105.3756743

Manufacturer: "Lancer"

Model: "Lancer 36"

Owners: "John & Jane Doe"

VesselEmail: "peter@creativeinterface.com"

VesselID: "55894744"

VesselImage: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QA8RXhpZgAASUkqAAgAAAACADEBAgAHAAAAJgAAADsBAgAHAAAALQAAAAAAAABHb29nbGUAUGljYXNhAP/bAIQAAwICCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICggICAgJCQkICAsNCggNCAgJCAEDBAQGBQYKBgYKDQ0KDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0N/8AAEQgDswLGAwEiAAIRAQMRAf/EAB4AAAEFAQEBAQEAAAAAAAAAAAQBAgMFBgAHCAkK/8QAYhAAAgECBAMFBQQFCAUIBgITAQIRAAMEEiExBUFRBhMiYXEHMoGRoRRCscEII1LR8BUzYnKCkuHxCSRDorIWNERTY3PC0hdUg5OzwxglNUVVo2R0hIWUldPiGSbExdTj5P/EABsBAAIDAQEBAAAAAAAAAAAAAAECAAMEBQYH/8QAPREAAgIBAwIDBQYFAwQCAwEAAAECEQMSITEEQRNRYQUicYGRFDKhscHRI0JS4fAGFfEkM2KSQ6JTcoI0/9oADAMBAAIRAxEAPwD3Vr9DXSTvUvdU7u69etjyzTfJHat1OSY/KmpNKwqchQ5XU6NXG3B8PwmmNbpbIpQoW3jmU6xVxadHUSJmqnuT1qS07rttSyimWQlp5LKylsaEUl/AL7wMD0oYXp3qbD3CDrqD1iq6aLrTA7uHWSeu0U5XKRB2ijsWVIgQP45edRWrHWmvzErfYsMNxRnXlE8+Yo7D4EZIB3+OtZ69v4JjmNdPOi8JxZlgD6/nWeUP6S+E13BcfwuGABEk6mpbKhfCx+PL5UUuMXUGNTO4MelEnDWiuhg/Om1NKmBRXKBzwhGUn46daqMNea0+mo9OVGNhbi7NOuw6Uy/YB94wfOasj5Pgr…"

VesselName: "Never Say Never"

VesselType: "Sail"

<prototype>: Object { … }

However, we I run the view and view the console I am getting an error: TypeError: window.App.RootScope.SourceObjects is undefined. The line that seems to be causing this error is:

for (var i = 0; i < window.App.RootScope.SourceObjects.length; i++)

This is confusing to me because it seems that SourceObjects must be defined since I can view it in the console log and my code is very similar to yours which works. Any ideas?

Cheers, Pete

decsoft

Hello Peter,

The idea of my code is to show you how to "convert" an Array of objects to your desired Array of arrays variable, but, I think the below can't do the job:


window.App.RootScope.SourceObjects=doc.data();
var objectsource =window.App.RootScope.SourceObjects;
console.log(window.App.RootScope.SourceObjects);

Certainly you are assigned some data to the "SourceObjects" variable, but, nothing happend then, you did not apply the code there, or, I can't see it.

I think it's better to use the JavaScript version of my sample, since you are already dealing with JavaScript code, so, the code can looks like the below one:

// Set the variable with the Array of objects
window.App.RootScope.SourceObjects = doc.data();

// Create a sample destiny Array of arrays variable
window.App.RootScope.DestinyArray = [];

// Iterate the source Array of objects variable
for (var i = 0; i < window.App.RootScope.SourceObjects.length; i++) {

  var
    objectItem = window.App.RootScope.SourceObjects[i];

  // Add the Array item into the destiny Array
  window.App.RootScope.DestinyArray.push(
   [objectItem.Name, objectItem.Latitude, objectItem.Longitude]
  );
}

//
window.console.clear();
window.console.info(window.App.RootScope.DestinyArray);

However, note that the above code can't work as expected, because you must change the below:


  window.App.RootScope.DestinyArray.push(
   [objectItem.Name, objectItem.Latitude, objectItem.Longitude]
  );

... in order to match your objects properties: for example, in my sample there is a property "Name" in the samples objects, but, maybe that property don't exists in your objects, or, may you want to use another properties. My code is just a sample which uses ficticious objects.

If I did not provide to you a real sample (using your source of data) is because I am not sure about the source that you get. So, please, try the above, and, if you wanted, post here the server's response, that is, the content of the "doc.data()" variable, but, be sure that you copy here the complete JSON (the idea is that you can get it from the developer console, but, not copying what you paste here: instead of it, you must copy here the entire JSON response, even if it's unformatted, that is not a problem) so I can take a look it.

I mean post here the contents of the red rectangle, and not the contents of the blue rectangle:

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi David,

I really appreciate your help as I am struggling with this. I have adapted an earlier sample that you sent me to try and fast track this. In View 1 I have a google map with a marker and infowindow. On view 2 I have a firestore query that returns two objects.

What I am trying to do is to leave the existing marker on the map on View 1 but also show two more markers based off of the query return along with infowindows for those markers with vessel name in infowindow. If you could let me know what I am doing wrong, it would be fantastic as I am spinning my wheels on this.

Sample: Download

Cheers, Pete

decsoft

Hello Peter,

If I am not wrong, it's not possible to remain the markers in the map, because, the map itself is gone once we move to another app view. So the app must be "recreated" when we back to the map view, to say like that, and, that's the moment again to prepare the right markers that we can show in the map. But this is not a problem, I think.

That is, certainly you can use a variable to feed the map of marks, to say like that: so that variable can be modified in another app view, so, when we go back to the map one, we simply set the markers again, including the possible new "marks information" which the referred variable includes. So in few words, the map nor markers are not "globals" and they are not "maintained", but, the app variables are, so we "feed the map" with that variables, wich can be changed in any of the app views.

Taking the above in consideration, let me how I can help you, Peter.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi David, Yes, I want everything to happen in View 1, I included View 2 just so that you could see that the query results are being returned as objects and I am showinig them in the report. That being said, View 2 is not necessary as same get query is in View 1. I am hoping that you could give me a hand getting View 1 to pull the query results in, convert them to an array and then show the array as markers on the map? Cheers, Pete

decsoft

Hello Peter,

The problem is that I can't get the response that you get from the server: I get some "permissions" error here and not the desired array of objects. So just place here the JSON response (remove any possible private information if needed) and I will try to help you.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi, I have relaxed the security rules so you should be able to get a return now. Pete

decsoft

Hello Peter,

There are various things to consider here. One thing require to take a look at the below code:


  firebase.firestore().collection("vessels").where("Fleets", "array-contains","56413073").orderBy("VesselName","asc").get().then(function(querySnapshot) {

    querySnapshot.forEach(function(doc) {

    });

  });

We have what we expected inside "querySnapshot", but, this is not an Array of Objects variable. In fact, to get access to the records sent to us by the server, we must use what you already do: the "forEach" over the "querySnapshot" variable, and then, once we get the "doc", retrieve the record using the "doc.data()" method.

So in fact you no need to convert any Array of objects variable to any Array of arrays variable: you can just prepare your Array (with markers information) in a way like the below one:


  firebase.firestore().collection("vessels").where("Fleets", "array-contains","56413073").orderBy("VesselName","asc").get().then(function(querySnapshot) {

    querySnapshot.forEach(function(doc) {
      // Add the object / marker info to our markersInfo array
      window.App.RootScope.markersInfo.push(doc.data());
    });

  });

But here is the other thing to be considered: you can't just initiate the map and prepare the markers just by write the right code below the above code, because that code is executed in an asynchronous, so, if you write something like the below:


  firebase.firestore().collection("vessels").where("Fleets", "array-contains","56413073").orderBy("VesselName","asc").get().then(function(querySnapshot) {

    querySnapshot.forEach(function(doc) {
      // Add the object / marker info to our markersInfo array
      window.App.RootScope.markersInfo.push(doc.data());
    });

  });

  alert('Hello world!');

... the "alert" is executed before our "markersInfo" variable has been completely feed. So what to do? Just wait for the variable to be feeded:


  // This variable stores the markers that we want to show in the map
  window.App.RootScope.markersInfo = [];

  // This starts everything
  firebase.firestore().collection("vessels").where("Fleets", "array-contains","56413073").orderBy("VesselName","asc").get().then(function(querySnapshot) {

    querySnapshot.forEach(function(doc) {
      // Add the object / marker info to our markersInfo array
      window.App.RootScope.markersInfo.push(doc.data());
    });

    // Now we can create the map, since we have the markers information ready to use here
    initMap();
  });

The "initMap()" function is executed when our "markersInfo" variable is already feeded, so, we can then create the map, and then iterate the Array variable to place the right marks inside the map. All the code is below: you can place in the Show event of the "View1" of the sample app that you linked before:



StartJS

  // This variable stores the markers that we want to show in the map
  window.App.RootScope.markersInfo = [];

  // This starts everything
  firebase.firestore().collection("vessels").where("Fleets", "array-contains","56413073").orderBy("VesselName","asc").get().then(function(querySnapshot) {

    querySnapshot.forEach(function(doc) {
      // Add the object / marker info to our markersInfo array
      window.App.RootScope.markersInfo.push(doc.data());
    });

    // Now we can create the map, since we have the markers information ready to use here
    initMap();
  });

  // This function is ready to be called in order to create the map
  function initMap() {

    window.App.RootScope.Map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      //mapTypeId: 'satellite',
      center: {lat: 20.749, lng: -105.38},
      disableDefaultUI: true,
      zoomControl: false,
      mapTypeControl: false,
      scaleControl: false,
      streetViewControl: false,
      rotateControl: true,
      fullscreenControl: true,
      //gestureHandling: 'cooperative',
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ['satellite', 'roadmap', 'terrain', 'hybrid']
      },
      styles: [{
        elementType: 'labels.icon',
        stylers: [{visibility: 'off'}]
      }]
    });

    // Once the map is created, we can iterate the markers to be shown

    for (var i = 0; i < window.App.RootScope.markersInfo.length; i++) {

      var
        info = window.App.RootScope.markersInfo[i];

      var
        marker = new google.maps.Marker({
          position: {lat: info.Latitude, lng: info.Longitude},
          map: window.App.RootScope.Map,
          title: info.VesselName
        });

      marker.addListener('click', function() {
        if (window.App.RootScope.MapWindow) {
          window.App.RootScope.MapWindow.close();
        }
        showInfoWindow(this);
      });
    }
  }

  // This function is intenteded to show an information window when a marker is pressed

  function showInfoWindow (marker) {

    var
      contentStr = '<div>';

    // Prepare the content of the window, in this sample, just a button, which identify the view
    // to go using the "view-name" data attribute. See bellow the "goto-view-button" event handler.

    contentStr = '<br><br><br>Click button below<br><br><br><button data-view-name="View2" class="goto-view-button btn btn-sm btn-primary">Goto View2</button>';

    contentStr += '</div>';

    window.App.RootScope.MapWindow = new google.maps.InfoWindow({
      content: contentStr
    });
    window.App.RootScope.MapWindow.open(window.App.RootScope.Map, marker);
  }

  // Prepare a event handler for all current and future "goto-view-button" elements

  $('body').on('click', '.goto-view-button', function () {
    // Use the "view-name" data attribute to go the right app view
    $scope.showView($(this).data('view-name'));
  });

EndJS

May we can enhance the above code, for example, to move the "initMap" and other functions into the "app functions manager", or maybe some changes are required, but, I hope that that code can help you to give an idea at least. Post here if you have further question, Peter.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Many thanks David!

I would like to push some of the marker data into the infowindow. In your sample, you are putting the markersInfo[i] into a var called info and you are using info.VesselName to set the title of the marker. However, since the info window is defined in it's own function, the info var is not defined within that function and is not available. How would I access the data related to that vessel inside the info window?

I would need to defined the contentStr with something like:


var ContentStr = '<b>Vessel: '+vesselname+'<br>Type: '+vesseltype+'<br>Model: '+vesselmodel+'<br>Owners: '+vesselowners+'<br>Position Updated: '+vesselgeoupdated+'<br><img src='+vesselimage+' width="250" ><br><br><button data-view-name="FleetMember_View" class="goto-view-button btn btn-sm btn-primary">View Details</button></b>';

Cheers,

Pete

decsoft

Hello Peter,

We can add to the marker the information if we need it. The "showInfoWindow" receive the marker as his argument, so, we can access to the marker's information as well. Just take a look at the below code, which is a modification of my latest one:

StartJS

  // This variable stores the markers that we want to show in the map
  window.App.RootScope.markersInfo = [];

  // This starts everything
  firebase.firestore().collection("vessels").where("Fleets", "array-contains","56413073").orderBy("VesselName","asc").get().then(function(querySnapshot) {

    querySnapshot.forEach(function(doc) {
      // Add the object / marker info to our markersInfo array
      window.App.RootScope.markersInfo.push(doc.data());
    });

    // Now we can create the map, since we have the markers information ready to use here
    initMap();
  });

  // This function is ready to be called in order to create the map
  function initMap() {

    window.App.RootScope.Map = new google.maps.Map(document.getElementById('map'), {
      zoom: 16,
      //mapTypeId: 'satellite',
      center: {lat: 20.749, lng: -105.38},
      disableDefaultUI: true,
      zoomControl: false,
      mapTypeControl: false,
      scaleControl: false,
      streetViewControl: false,
      rotateControl: true,
      fullscreenControl: true,
      //gestureHandling: 'cooperative',
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ['satellite', 'roadmap', 'terrain', 'hybrid']
      },
      styles: [{
        elementType: 'labels.icon',
        stylers: [{visibility: 'off'}]
      }]
    });

    // Once the map is created, we can iterate the markers to be shown

    for (var i = 0; i < window.App.RootScope.markersInfo.length; i++) {

      var
        info = window.App.RootScope.markersInfo[i];

      var
        marker = new google.maps.Marker({
          info: info,
          position: {lat: info.Latitude, lng: info.Longitude},
          map: window.App.RootScope.Map,
          title: info.VesselName
        });

      marker.addListener('click', function() {
        if (window.App.RootScope.MapWindow) {
          window.App.RootScope.MapWindow.close();
        }
        showInfoWindow(this);
      });
    }
  }

  // This function is intenteded to show an information window when a marker is pressed

  function showInfoWindow (marker) {

    var
      contentStr = '<div>';

    // Prepare the content of the window, in this sample, just a button, which identify the view
    // to go using the "view-name" data attribute. See bellow the "goto-view-button" event handler.

    contentStr = marker.info.VesselName + '<br><br><br>Click button below<br><br><br><button data-view-name="View2" class="goto-view-button btn btn-sm btn-primary">Goto View2</button>';

    contentStr += '</div>';

    window.App.RootScope.MapWindow = new google.maps.InfoWindow({
      content: contentStr
    });
    window.App.RootScope.MapWindow.open(window.App.RootScope.Map, marker);
  }

  // Prepare a event handler for all current and future "goto-view-button" elements

  $('body').on('click', '.goto-view-button', function () {
    // Use the "view-name" data attribute to go the right app view
    $scope.showView($(this).data('view-name'));
  });

EndJS

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

David,

I can't thank you enough for all of your help, I am finally starting to get a handle on this! I think that I have a handle on all of my mapping requirements now and will spend some time polishing it, then on to instant messaging.

Cheers, Pete

decsoft

No problem, Peter! :-)

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.