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

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();

Browser not supported