Im using MeteorJS + ReactJS, using google map api without package. I am able to display the map, using direction and adding custom event to marker, after then i built it to apk to test it on my android phone, after i installed and open it, it shows only white screen, inspecting it using chrome://inspect showing no console error but the map api does not loaded, i was using javascript to append the google map api script tag. Here is the code:
// imports/ui/components/Map/Map.jsx
import React from 'react';
import { Tracker } from 'meteor/tracker';
import { compose } from 'react-komposer';
import { SetGoogleMapApiScript, initMap } from './MapFunctions.jsx';
import { getTrackerLoader } from '../../../api/CommonFunction/TrackerLoader.js';
class Map extends React.Component {
componentDidMount () {
let directions = this.props.directions;
SetGoogleMapApiScript ( directions );
console.log( "Mounted" );
}
render () {
return (
<div className="map-container" id="map-container">
<PreLoader />
</div>
);
}
};
export default Map;
//////////////////////// Container //////////////////////
function reactiveMapper ( props, onData ) {
if ( Meteor.subscribe("directions").ready() && Meteor.subscribe("bus_route").ready() && Meteor.subscribe("bus_checkpoint").ready() ) {
const directions = Direction.find(),
busRoutes = BusRoute.find(),
busCheckPoints = BusCheckPoint.find();
onData( null, { directions, busRoutes, busCheckPoints } );
};
};
let MapComposed = compose ( getTrackerLoader ( reactiveMapper ) ) ( Map );
export { MapComposed };
//imports/ui/components/Map/MapFunctions.jsx
let SetGoogleMapApiScript = ( directions )=> {
window.Directions = directions;
Session.set("setMarker", []);
let script = document.createElement( "script" ),
$ = require( "jquery" );
//script.scr="https://maps.googleapis.com/maps/api/js?key=AIzaSyB1-fwP96l-_VAicaDGRNMmEU93TY4fcGs&callback=initMap";
script.setAttribute( "src", "https://maps.googleapis.com/maps/api/js?key=AIzaSyB1-fwP96l-_VAicaDGRNMmEU93TY4fcGs&libraries=places&callback=initMap" );
script.setAttribute( "async", "" );
script.setAttribute( "defer", "" );
$(".script_tag").append( script );
console.log( "Map appended" );
};
// Make global functions
window.initMap = ()=> {
// Using ES6 Closure
map = new google.maps.Map( document.getElementById( "map-container" ), {
center: { lat: 11.5423438, lng: 104.8786078 },
zoom: 12
});
markers = [];
ShowUserRoute( map, Directions );
SearchBehaviour ( map );
map.addListener('click', ( e )=> addMarker( e.latLng ));
};
export { SetGoogleMapApiScript, initMap };
// more body hidden //
my problem is that when i inspect the element in chrome://inspect, open the app while connecting my android phone to my laptop, div element which suppose to append the script to is empty
<div className="script"></div>
// this was supposed to have script tag but inspecting from chrome://inspect, it show only the div element like above, but in my localhost from web, it works normal
As i try to console log at the componentDidMount of map component, it does not get fired, so the map does not get fired also since the init map depends on that. So please help and thanks very much.
PS: Used google map packages from atmosphere and 2 other famous pacakges from npm but decided to switch to non-package provided me complete feature of google map api