We Keep Coding

I can't show a multipolygon on a map in OpenLayers

I cannot assign polygon property to the area I want on the map in my project that I have created with open layers and angular
My method that I have created my map and then call in ngOnit()
IntilazeMapParsel() {
this.view = new View({
center: [3876682.9740679907, 4746346.604388495],
zoom: 6.5,
// minZoom:5.8
});
console.log("mao")
this.mapParsel = new Map({
view:this.view,
layers: [
new Tile({
source: new XYZ({
url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}',
}),
zIndex: -5444
}),
],
target: 'ol-map-parsel'
});
}
Here is the code I wrote because I want to show the multypolygon value on my map.
I don't understand why it doesn't appear on the map, I would appreciate it if you could help.

How to add layers to arcgis map by react-arcgis npm?

I am trying to add a layer to arcgis with react-arcgis npm,
esriPromise(["esri/layers/TileLayer"]).then(([ TileLayer ]) => {
var initLayer = new TileLayer({
url: "http://......."
});
console.log(initLayer);
this.setState({ layer: initLayer });
});
But I get null outputs to most of the properties.
Plus when I'm trying to add the layers properties to the map, I get following errors,
[esri.core.Accessor] Accessor#set Assigning an instance of
'esri.layers.TileLayer' which is not a subclass of
'esri.core.Collection'
<div id = 'main-content'>
<Map
class="full-screen-map"
mapProperties={{
basemap: 'topo',
showLabels : true,
logo: false,
sliderPosition: 'bottom-left',
layers: this.state.layer,
}}
viewProperties={{
layers: this.state.layer,
zoom: 12,
extent: this.state.extent,
minZoom: minZoom,
maxZoom: maxZoom,
}}
onFail={this.handleFail}
onLoad={this.handleMapLoad}
/>
</div>
Any help would be much appreciated...

Layers is a collection. I was passing a single layer it self all this time.
All I had to do is make an array of 'layer' state and pass the layer to the array

Hide full screen control of google map charts

Hello I am using google map charts available in google visualization chartsGoogle Map Chart. But there is no way we can hide the full screen control symbol appears in top-right position. Available options can be seen here. I have also tried to use fullscreenControl: false option given on official google map api documentation fullscreenControl but that did not work for me. Please suggest how to disable this options on mobile/ionic apps.
this.element = this.el.nativeElement;
let mapOptions = {
showTooltip: true,
tooltip: { isHtml: true },
mapType: 'satellite',
useMapTypeControl: true,
fullscreenControl: false
};
let data = [
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
];
dataTable = google.visualization.arrayToDataTable( data );
this.map = new google.visualization.Map(this.element);
this.map.draw( dataTable, mapOptions );
Thanks in advance

Below code working for me in Ionic app, You can try this:
declare var google; // declare this var above #Component({}) with your other imports
directionsDisplay = new google.maps.DirectionsRenderer;
#ViewChild('map') mapElement: ElementRef;
map: any;
this.map = new google.maps.Map(this.mapElement.nativeElement, {
zoom: 15,
center: this.maplocation, // this.maplocation={lat:'',long:''} is my Lat,Long values
fullscreenControl: false
});
this.directionsDisplay.setMap(this.map);
new google.maps.Marker({
position: this.maplocation,
map: this.map
});
In HTML :
<ion-content>
<div #map id="map"></div>
</ion-content>

google maps pin api v3

I have got a google map loading on my website using the api. I have styled it how I would like but I need to add a pin with custom image to a location on my map. The center co-ordinatres are different of those that I would like to use for the pin. I have tried using the code supplied in the google api docs but cannot seem to get it to work. below is the code I am using now without the pin code as it wasn't working. Would someone be able to tell me what to add to get the pin working for an image file called:
'pin.png'
and the co-ordinates:
51.4531807,-2.1864739,17
here is my current JS
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
var map = new google.maps.Map(mapElement, mapOptions);
var office = new google.maps.LatLng(51.4477764,-2.2015512);
var marker = new google.maps.Marker({
position: office,
map: map
});
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 17,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(51.4476895, -2.2057354), // New York
draggable: false,
zoomControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
streetViewControl: false,
disableDefaultUI: true,
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [ { featureType:'water', elementType:'all', stylers:[ {hue:'#bbbbbb'}, {saturation:-100}, {lightness:-4}, {visibility:'on'} ] },{ featureType:'landscape', elementType:'all', stylers:[ {hue:'#999999'}, {saturation:-100}, {lightness:-33}, {visibility:'on'} ] },{ featureType:'road', elementType:'all', stylers:[ {hue:'#999999'}, {saturation:-100}, {lightness:-6}, {visibility:'on'} ] },{ featureType:'poi', elementType:'all', stylers:[ {hue:'#aaaaaa'}, {saturation:-100}, {lightness:-15}, {visibility:'on'} ] },{
featureType: 'poi.business',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using out element and options defined above
}

The code to display the pin on the map was correct however this was outside of where the map is accessible. To rectify this issue the code had to be put after the map and before the closing bracket as displayed by #Dr.Molle
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var hadston = new google.maps.LatLng(51.4477764,-2.2015512);
var marker = new google.maps.Marker({
position: hadston,
map: map,
clickable: false,
icon: 'pin.png'
});
}
To display a custom pin I used icon with a direct link to the image.
icon: 'pin.png'

Showing visitors locations in Google Maps via JS

So, I have a JavaScript code that shows a map, and my location. It also has a few extra settings applied to it. My question is, looking at the following JS code, and using the GoogleMaps API here: http://maps.googleapis.com/maps/api/js?sensor=false, is there any way to show the visitors locations on this map?
I am trying t build a virtual site view GeoLocator. That shows the locations of all my sites viewers. Or, maybe there is a plugin online.
var map;
function initialize() {
var options =
{
zoom: 2,
center: new google.maps.LatLng(geoip_latitude(), geoip_longitude()),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions:
{
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
poistion: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: [google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.SATELLITE]
},
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.ZOOM_PAN
},
scaleControl: true,
disableDoubleClickZoom: true,
draggable: true,
streetViewControl: true,
draggableCursor: 'move'
};
map = new google.maps.Map(document.getElementById("map"), options);
// Add Marker and Listener
var latlng = new google.maps.LatLng(geoip_latitude(), geoip_longitude());
var marker = new google.maps.Marker
(
{
position: latlng,
map: map,
title: 'Click me'
}
);
var infowindow = new google.maps.InfoWindow({
content: 'You Are Here'
});
google.maps.event.addListener(marker, 'click', function () {
// Calling the open method of the infoWindow
infowindow.open(map, marker);
});
}

Well, that's possible... you would need a server to send this information to (which you would have to set up on the page that the viewers visit), that would find their IP and lookup their long/lat on an IP database, if that IP is known (that information is not always there and not necessarily accurate, if it is). Then you would need to have an interface that gets the long/lat values from this database and displays them on the map with markers, as I described on my comment.
Of course, you can also just use Google Analytics (google.com/analytics) where all of this is done for you. :)