Google Maps Example

Owned by Christopher Simonian
Last updated: Jan 16, 2018
4 min read

Table of Contents


Description

This particular example shows you how to get the map to zoom to a Site's location and drop a pin with Magic Bubbles on it. 

It is important to note that although we provide the component, program/developer knowledge is required to customize and create custom uses with this component.

We've provided this example to help show one scenario on how this would work. 

We recommend checking out the Google Maps API docs for more information on the code: https://developers.google.com/maps/documentation/javascript/adding-a-google-map


IMPORTANT - LICENSING

We provide the component/library but users may need to get their own API Key License to continue using the Google Maps component. 


Completed Model (EXAMPLE)


DOWNLOAD: MapModelExample.zip


  1. To upload go to Folio app and select "restore". 


2. Open your graphic and bring out the MapExample component


3. Make sure your site(s) have a longitude and latitude setup!!!



Example Program Code


var myMap   = query('myMap')
var map     = null;

var initMap = function () 
{
    var promise = finstack.eval("readAll(site and geoCoord)");
    
    promise.then(function(event) 
    {
        var mySites = event.result.toObj();
        // var foo     = [{lat: -25.363, lng: 131.044},{lat:-23, lng: 140.3}];
        
       mySites.map(function(site)
       {
            var coords  = site.geoCoord.split(",");
            return {id: site.id, position: {lat: parseFloat(coords[0]), lng: parseFloat(coords[1])}, dis: site.dis}
            
        }, this).forEach(function(item, idx) 
        {
            var marker = new google.maps.Marker(
            {
                title: item.dis,
                place:
                {
                    placeId:    item.id,
                    location:   item.position
                },
                position: item.position,
                map: myMap.mapsView.map,
                cursor: "pointer"
            });
            
            if (idx === 0) {
                myMap.mapsView.map.setCenter(item.position);
                myMap.mapsView.map.setZoom(4);
            }
            
            marker.addListener("click", function (test)
            {
                // TODO: Open Magic Bubbles
               top.app.ShowRelatedBubbles(item.id, item.id);
            });
        });
    });
};



initMap();