Integrated Analytics System

 View Only

how to load google map using custom control

  • 1.  how to load google map using custom control

    Posted Thu May 14, 2020 10:36 AM
    I've successfully loaded the mapbox using custom control and put the data from the database onto the mapbox. I tried the same thing using google map but it didn't work. Your views and opinions are greatly appreciated.


    This is the code to load google map using custom control:

    define(["https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap", "jquery"], function(mapboxgl, jQuery) {
    //Add Variables
    "use strict";
    var map = '',
    bounds = '',

    function GoogleMapControl() {};

    GoogleMapControl.prototype.initialize = function(oControlHost, fnDoneInitializing, oDataStore) {
    console.log('1. init ******************')


    var mapContainer = oControlHost.container.id;

    map = new google.maps.Map({
    container: mapContainer, // container id
    center: new google.maps.LatLng( -34.397, 150.644 ),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 8
    });

    bounds = new google.maps.LatLngBounds();

    fnDoneInitializing();
    };


    GoogleMapControl.prototype.draw = function(oControlHost) {
    oControlHost.container.innerHTML = "Map PlaceHolder";
    console.log('3. Draw ******************')

    };


    GoogleMapControl.prototype.setData = function(oControlHost, oDataStore) {

    console.log('2. SetData *****************')

    };


    return GoogleMapControl;
    });


    Thanks.



    ------------------------------
    MOHD AZAM MOHD AMIN
    ------------------------------

    #IntegratedAnalyticsSystem