I am using Angular 13 and Ionic 6 to add Google Maps API V3. Here is a simple example provided by Google to add the map using TypeScript.
When using Ionic, I am supposed to add the following in the index.html file:
<script src="https://maps.googleapis.com/maps/api/js?key=ZZZZZ&language=en®ion=ca" async defer>
</script>
Then, I will use it in the appropriate components throughout the application. As you can see, the language and region have been hardcoded in the script. I am not sure how would I allow the user to dynamically choose the language and region.
The objective is to have Google's localization example implemented using Ionic. The languages I am interested in adding are English and French.
I tried to add the script in the html file of the component but that didn't work. I even tried to dynamically remove and insert a script but it seemed too complicated. Any help would be appreciated and thank you in advance!
You can use loader to add google maps dynamically, like mentioned here:
https://developers.google.com/maps/documentation/javascript/overview#js_api_loader_package
const loader = new Loader({
apiKey: "YOUR_API_KEY",
version: "weekly",
...additionalOptions,
});
loader.load().then(() => {
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
});
and use variable for language and region selection
Related
I am new to the Polymer 3.0 library, I am trying to implement ArcGIS in Polymer 3.0.
<!-- This Part Belongs to the HTML Template -->
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<div id="viewDiv"></div>
// Here I defined the module of GIS
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511, 34.09042],
zoom: 11
});
});
I used require field inside ready function and also outside the function but it doesn't work.
Can anyone please review this and provide me the solution/guideline to resolve it?
There are mainly two ways to integrate ArcGIS API for JavaScript into other frameworks, using Webpack or esri-loader (ArcGIS JS Guide - Using Frameworks).
I will go directly with, is the most versatile way to achieve it. There are several examples on how use the API with many popular frameworks/libraries through esri-loader. Though no polymer3 example, it should not be too difficult to do it taking as example the others.
I'm moving a project to webpack, splitting code into modules, but at some places i bump into a situation where plugin or some other code expects map to be a visible global variable. The following exception are thrown because map is not exposed to it:
onRemove: function() {
this._removeMarkers();
this.onMap = false;
map.off("moveend", this._update);
},
Uncaught ReferenceError: map is not defined
at NewClass.onRemove (leaflet.conditionalLayer.js:77)
at NewClass.removeLayer (Layer.js:185)
at NewClass._onInputClick (Control.Layers.js:378)
at HTMLInputElement.handler (DomEvent.js:79)
Currently i create the map variable in the bundle file (map.js in my case) which i load with the page, and import it in other modules like this
import { map } from './map.js';
All the leaflet code and leaflet plugins are imported as scripts without webpack. How can I share a map instance across all the scripts just like as it would be created without a module?
For now i worked around this problem and declared map as window.map in a module and it works, but it seems there is more convenient way of importing instead of using window object.
Looks like a bug in leaflet-conditionalLayer plugin.
Its onRemove method should either:
Accept a map argument, as shown in Leaflet tutorial for extending Controls:
onRemove: function(map) {
// (do something)
}
Or use this._map (instead of map) as suggested in (your?) issue https://github.com/Eclipse1979/leaflet-conditionalLayer/issues/6
The good news is that Leaflet class system should enable you to easily patch that plugin, without having to wait for the plugin author to fix this bug:
L.ConditionalMarkers.include({
onRemove: function (map) {
this._removeMarkers();
this.onMap = false;
map.off("moveend", this._update);
}
});
I've been trying to embed a Google Map on my page via React. In my index.html html, I the followng scipr tag in between my tag
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap" async defer></script>
I need to create the initMap callback function. I want this callback function to be inside my Map component.
1) How would I connect this callback such that the maps API knows where to find it?
2) To actually create the map, I do it through the google object.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
scrollwheel: false,
zoom: 8
});
However, my React component won't compile because it's complaining that the 'google' object doesn't exist -- meaning it's not being exposed to me as it should. Of course when I go to the console, I can access it. It seems like the component either doesn't have access to it (although it should since the objects from script tags become global, right?) or its accessing it before the library is loaded (which I don't know how to fix even though it says "defer" in the script tag).
Any help would be appreciated. My problem is similar to this, but the accepted answer did not work for me.
I also tried this tutorial to no avail...I'm not sure if I'm missing something.
Quick Example
If u want ignore the error, try add global variable in your eslint config
"globals": {
"google": true
}
In my example, I remove the callback argument in script tag, I did it in my component.
Hope this can help.
I have to implement the multiple markers functionality from array of addresses using angular js.
Here is my fiddle :
http://jsfiddle.net/cVsdp/175/
But i'm getting the following error :
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp
Can any one please help me.
You can change the JSFiddle setting from onLoad to No wrap - in <body>
See the working example: http://jsfiddle.net/cVsdp/179/
Edit:
Also, change the line
map = new google.maps.Map(angular.element(document.querySelector("#map_canvas")[0]), myOptions);
to the following:
map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
The working JSFiddle: http://jsfiddle.net/cVsdp/180/
so many examples on internet, but in most of the examples latitude and longitude is already available in those databases.
The following example takes array of address and put multiple markers on google map.
The working example :
jsfiddle :http://jsfiddle.net/cVsdp/182/
First of all: The map is working.
The script is in scripts.js, which is included at the bottom of the site.
The Google maps script is included in the header (<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>).
The problem is I am getting this a is NULL error and I would like to fix it, although the map is working fine.
I have searched Google and Stackoverflow and tried every possible combination of the answers I found, but either the map is not working, or the map is working, but I get this a is NULL error error.
Here is the simple demo script I am using for testing:
function init() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('resultsGmap'),
myOptions);
}
window.onload=init();
I have tried to use jQuery too like this:
$(function() {
init();
});
But than nothing works at all. I have also tried to do it very simple like this:
init();
Which works (the map works) but the a is NULL error error appears again.
The other thing I tried was:
google.maps.event.addDomListener(window, 'load', init);
But than again the map doesn't display and the error appears.
For various reason I cant do it the way it is in the official example # Google:
<body onload="init()">
Anybody got an idea what I am doing wrong?
Regards and have a good day!
EDIT:
I have just tried to reproduce the error on a blank page and there it doesnt appear - so I guess it is something else in my code (p.s. I am loading the site with the map via ajax and call the script with $.getScript).
Sorry that I didnt check that before. I guess the error lies in there somewhere.
One more thing: Do you guys think it would be very, very bad to just ignore the error? Since the map and every feature is working correctly.
I'm suspecting it has to do with the ID you provide. Is there a (for example) DIV with the ID 'resultsGmap'.
It might have also got to do with the uppercase. Try using lowercase only, optionally with underscores (_)