Questions[google-maps]

I have followed all the steps from microsoft documentation: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/map/map
to implement maps like google maps in xamarin forms I have my manifest like this:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:installLocation="auto">
    <uses-sdk android:minSdkVersion="15" android:targetSdkVersion="28" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:label="$safeprojectname$">
        <!-- Put your Google Maps V2 API Key here. -->
        <meta-data android:name="com.google.android.geo.API_KEY" android:value="xxxxx" />
        <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />
    </application>

and the content page with the map:

<maps:Map>
    <x:Arguments>
        <maps:MapSpan>
            <x:Arguments>
                <maps:Position>
                    <x:Arguments>
                        <x:Double>36.9628066</x:Double>
                        <x:Double>-122.0194722</x:Double>
                    </x:Arguments>
                </maps:Position>
                <x:Double>0.01</x:Double>
                <x:Double>0.01</x:Double>
            </x:Arguments>
        </maps:MapSpan>
    </x:Arguments>
</maps:Map>

However, when executing the app, the blank map opens and a few seconds later the google maps application opens, which is not the idea. The idea is to control the map in the content page, if the route is opened in the google maps application I don't have a way to control the information. How can I do so that when executing the app the google maps application is not opened and instead the route is painted on the xamarin forms map????????????

I am making use of the "vue2-google-maps" package in an application developed with Laravel 5.7. In this case I am creating a component named google-map . Within this component gmap-autocomplete and gmap-map are used . The component is registered in app.js and both the map and the autocomplete input work correctly. The problem is that the input is located above the map and what I want is for it to be inside the map.

I am currently achieving this:

I want it to look like the following image:

This would normally be achieved (without using vue or that package) with the following lines:

let inputSearch = document.getElementById('pac-input');
searchBoxAdd = new google.maps.places.SearchBox(inputSearch );
myMap.controls[google.maps.ControlPosition.TOP_CENTER].push(searchBoxAdd );

But in this case it is not the same. Based on the documentation, I saw that I can access the "map" object by adding ref="mapRef"it to my gmap-map component and adding

mounted () {
    this.$refs.mapRef.$mapPromise.then((map) => {
      // En este punto ya tengo mi objeto map.
    })
  }

Based on this information I tried to do the following:

mounted () {
        this.$refs.mapRef.$mapPromise.then((map) => {
          let inputSearch = document.getElementById('pac-input');
          searchBoxAdd = new google.maps.places.SearchBox(inputSearch );
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(searchBoxAdd );
        })

But it still does not load the input inside the map and in the console it shows me the following error:

controls.js:118 Uncaught (in promise) TypeError: Cannot read property 'zIndex' of undefined

I leave my main component, which would be "google-maps"

<template>
    <div>
        <div>
            <h2>Search and add a marker</h2>
            <label>
                <div class="form-inline">
                    <gmap-autocomplete
                        class="form-control"
                        @place_changed="setPlace">
                    </gmap-autocomplete>
                    <button @click="addMarker" class="btn btn-primary btn-flat">Add</button>
                </div>
            </label>
            <br/>
        </div>
        <br>
        <gmap-map ref="mapRef"
            :center="center"
            :zoom="12"
            style="width:100%;  height: 400px;"
        >
            <gmap-marker
                :key="index"
                v-for="(m, index) in markers"
                :position="m.position"
                @click="center=m.position"
            ></gmap-marker>
        </gmap-map>
    </div>
</template>

<script>
    import {gmapApi} from 'vue2-google-maps';

    export default {
        name: "GoogleMap",

        data() {
            return {
                // default to Montreal to keep it simple
                // change this to whatever makes sense
                center: { lat: 45.508, lng: -73.587 },
                markers: [],
                places: [],
                currentPlace: null
            };
        },

        mounted() {
            this.geolocate();
        },

        methods: {
            // receives a place object via the autocomplete component
            setPlace(place) {
                this.currentPlace = place;
            },
            addMarker() {
                if (this.currentPlace) {
                    const marker = {
                        lat: this.currentPlace.geometry.location.lat(),
                        lng: this.currentPlace.geometry.location.lng()
                    };
                    this.markers.push({ position: marker });
                    this.places.push(this.currentPlace);
                    this.center = marker;
                    this.currentPlace = null;
                }
            },
            geolocate: function() {
                navigator.geolocation.getCurrentPosition(position => {
                    this.center = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                });
            }
        }
    };
</script>

Thanks. Cheers!

I am getting two errors, the first one:

###Uncaught SyntaxError: Unexpected token < 

And the second:

###ReferenceError: google is not defined 

When I run it on my computer everything works but at the time of deployment now.iothe errors appear in the browser (Google Chrome) after I log in. I guess the problem is when I want to load the map but I'm not sure, the first code is from my login, and the second is the map.

import React, { Component } from 'react';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import axios from 'axios'
import Map from './Map.js';
import { subscribeToTimer } from './api';
import { niPedo } from './api';
import WorkerMainMenu from './Woker_Main_Menu';

class MainMenu extends React.Component {
constructor(props) {
    super(props);
    this.state =
        {
            loggedIn: false,
            timestamp: 'no timestamp yet',
            timestamp2: 'no timestamp 2',
            map: true
        }
    this.loggedInMap = this.loggedInMap.bind(this);
    this.loggedInTable = this.loggedInTable.bind(this);
    this.notLoggedIn = this.notLoggedIn.bind(this);
    this.login = this.login.bind(this);
    this.openMap = this.openMap.bind(this);
    this.openTable = this.openTable.bind(this);
    subscribeToTimer((err, timestamp) => this.setState({
        timestamp
    }));
    niPedo((err, timestamp2) => this.setState({
        timestamp2
    }));
}
openMap() {
    this.setState({ map: true });
}
openTable() {
    this.setState({ map: false });
}

login() {
    var user = this.refs.inputEmail.value;
    var pwd = this.refs.inputPassword.value;
    var login = {
        user: user,
        pwd: pwd
    }
    axios.post('/api/Login/', { login })
        .then(res => {
            if (res.status !== 200) {
                alert("Intentalo de nuevo");
            }
            else {
                if (res.data.user != null && res.data.user != undefined && res.data.user != "") {
                    sessionStorage.setItem('loggedUser', JSON.stringify(res.data.user));
                    var loggedUser = sessionStorage.getItem('loggedUser');
                    this.setState({ loggedIn: true });
                } else {
                    alert("Intentalo de nuevo");
                }
            }
        }, function (error) {
            console.log(error);
        });

}
loggedInMap() {
    return (
        <div className="wrapper">

            <nav id="sidebar">
                <div className="sidebar-header">
                    <a href="index.html">
                        <img className="profile-img-card" src="images/logo.svg" alt="" />
                    </a>
                </div>

                <ul className="list-unstyled components">


                    <li className="success">
                        <a href="#" onClick={this.openMap}  >Home</a>

                    </li>
                    <li className="success">
                        <a href="#" onClick={this.openTable}  >Table</a>
                    </li>
                </ul>
            </nav>

            <div id="content" style={{ width: "100%" }}>

                <nav className="navbar navbar-default">
                    <div className="container-fluid">

                        <div className="navbar-header">
                            <button type="button" id="sidebarCollapse" className="btn btn-info navbar-btn">
                                <i className="glyphicon glyphicon-align-justify"></i>
                            </button>
                        </div>
                    </div>
                </nav>

                <div className="container">
                    <h1>This is the timer value: {this.state.timestamp}</h1>
                    <h1>This is the timer value: {this.state.timestamp2}</h1>
                    <Map />
                </div>
            </div>
        </div>
    )
}
loggedInTable() {
    return (
        <div className="wrapper">

            <nav id="sidebar">
                <div className="sidebar-header">
                    <a href="index.html">
                        <img className="profile-img-card" src="images/logo.svg" alt="" />
                    </a>
                </div>

                <ul className="list-unstyled components">


                    <li className="success">
                        <a href="#" onClick={this.openMap}>Home</a>

                    </li>
                    <li className="success">
                        <a href="#" onClick={this.openTable}>Table</a>
                    </li>
                </ul>
            </nav>

            <div id="content" style={{ width: "100%" }}>

                <nav className="navbar navbar-default">
                    <div className="container-fluid">

                        <div className="navbar-header">
                            <button type="button" id="sidebarCollapse" className="btn btn-info navbar-btn">
                                <i className="glyphicon glyphicon-align-justify"></i>
                            </button>
                        </div>
                    </div>
                </nav>

                <div className="container">
                    <WorkerMainMenu />
                </div>
            </div>
        </div>
    )
}
notLoggedIn() {
    return (
        <center>
            <div className="card card-container">
                <img className="profile-img-card" src="images/logo.svg" alt="" />
                <p id="profile-name" className="profile-name-card"></p>
                <form className="form-signin">
                    <span id="reauth-email" className="reauth-email"></span>
                    <input type="email" ref="inputEmail" className="form-control" placeholder="Email address" required />
                    <input type="password" ref="inputPassword" className="form-control" placeholder="Password" required />
                    <button className="btn btn-lg btn-primary btn-block btn-signin" type="button" onClick={this.login} href="index.html" >Sign in</button>
                </form>
                <a href="#" className="forgot-password">
                    Forgot the password?
            </a>
            </div>
        </center>
    )
}
render() {
    if (this.state.loggedIn && this.state.map) {
        return this.loggedInMap();
    } else if (this.state.loggedIn && !this.state.map) {
        return this.loggedInTable();
    } else {
        return this.notLoggedIn();
    }
}

}
export default MainMenu

And the view that loads afterwards is the following:

import React from "react"
import geolib from "geolib";
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker, Polygon } from "react-google-maps"

const defaultOptions = {
  strokeWidth: .5,
  stroke: '#FF5106',
  strokeOpacity: '0.8',
  fill: '#FF4234',
  fillOpacity: '.3',
  onMouseEnter: function (e) {
  },
  onMouseLeave: function (e) {
  }
};

var coordsTemp = { lat: 1, lng: 1 };

const coords = [
  { lat: 21.152895, lng: -101.717851 },
  { lat: 21.152975, lng: -101.717754 },
  { lat: 21.153160, lng: -101.717934 },
  { lat: 21.153106, lng: -101.717998 },
  { lat: 21.153007, lng: -101.717901 },
  { lat: 21.152961, lng: -101.717955 },
  { lat: 21.152908, lng: -101.717902 },
  { lat: 21.152924, lng: -101.717881 }
 ];
const coordsGeolib = [
  { latitude: 21.152895, longitude: -101.717851 },
  { latitude: 21.152975, longitude: -101.717754 },
  { latitude: 21.153160, longitude: -101.717934 },
  { latitude: 21.153106, longitude: -101.717998 },
  { latitude: 21.153007, longitude: -101.717901 },
  { latitude: 21.152961, longitude: -101.717955 },
  { latitude: 21.152908, longitude: -101.717902 },
  { latitude: 21.152924, longitude: -101.717881 }
];

const MyMapComponent = compose(
  withProps({
    googleMapURL: "https:/maps.googleapis.com/maps/api/js?key=[MY API KEY]&libraries=places",
    loadingElement: <div style={{ height: '100%' }} />,
    containerElement: <div style={{ height: '650px' }} />,
    mapElement: <div style={{ height: '100%' }} />,
  }),
  withScriptjs,
  withGoogleMap
 )((props) =>
  <GoogleMap
    defaultZoom={17}
    defaultCenter={{ lat: 21.152975, lng: -101.717833 }}
  >
    <Polygon paths={coords} options={defaultOptions} />
    {props.isMarkerShown && <Marker position={{ lat: props.coordsMe.lat, lng: props.coordsMe.lng }} onClick={props.onMarkerClick} label={props.markertext} />}

  </GoogleMap>
)

class Map extends React.PureComponent {

  state = {
    markertext: "Mmmm...",
    isMarkerShown: false,
    coordsMe: { lat: 21.152348, lng: -101.717292 },
  }

  componentDidMount() {
    this.obtainlocation()
    this.delayedShowMarker()
  }

  obtainlocation() {
    navigator.geolocation.getCurrentPosition(position => {
      coordsTemp = { lat: position.coords.latitude, lng: position.coords.longitude };
      this.setState({ coordsMe: coordsTemp })
    })
    this.markerInsidePolygon()
  }

  markerInsidePolygon() {
    var isInside = geolib.isPointInside(
      { latitude: this.state.coordsMe.lat, longitude: this.state.coordsMe.lng },
      coordsGeolib
    ) ? 'Sip' : 'Nee'
    this.setState({ markertext: isInside })
  }

  delayedShowMarker = () => {
    setTimeout(() => {
      this.setState({ isMarkerShown: true })
    }, 1000)
  }

  handleMarkerClick = () => {
    this.setState({ isMarkerShown: false })
    this.obtainlocation()
    this.delayedShowMarker()
  }

  render() {
    return (
      <MyMapComponent
        isMarkerShown={this.state.isMarkerShown}
        onMarkerClick={this.handleMarkerClick}
        coordsMe={this.state.coordsMe}
        markertext={this.state.markertext}
      >
      </MyMapComponent>
    )
  }
}

export default Map;

Thanks in advance :)

This is one of many questions or queries that I have about the implementation of Google Maps in a web page. The first one is that by entering the following line with my APIKEY the map IS NOT SHOWN:

<script src="https://maps.googleapis.com/maps/api/js?key=BLABLABLABLABLABLABLABLABLABLABLA&callback=initMap" async defer></script>

On the other hand, if I add this other line before, if it is shown !!!

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Seeing with F12 it tells me that I have included the google maps api many times... The code that I have armed is the following:

<head>
<meta charset="utf-8">
<title>Mapa</title>
<style>
  #map-canvas {
    height: 800px;
    width: 100%;
    box-shadow: 5px 5px 5px #888;
  }
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <!--<script src="https://maps.googleapis.com/maps/api/js?key=BLABLABLABLABLABLABLABLABLABLABLA&callback=initMap" async defer></script>-->

I need to do something similar to the following Google maps example: get latitude & longitude

At the moment I have only been able to get lat and long by locating the pointer, but I want to get the address of those coordinates and vice versa. Also that from an input it can locate on the map and obtain its coordinates.

var marker;          //variable del marcador
var coords = {};    //coordenadas obtenidas con la geolocalización

//Funcion principal
initMap = function ()
{

    //usamos la API para geolocalizar el usuario
        navigator.geolocation.getCurrentPosition(
          function (position){
            coords =  {
              lng: position.coords.longitude,
              lat: position.coords.latitude
            };
            setMapa(coords);  //pasamos las coordenadas al metodo para crear el mapa


          },function(error){console.log(error);});

}



function setMapa (coords)
{
      //Se crea una nueva instancia del objeto mapa
      var map = new google.maps.Map(document.getElementById('map'),
      {
        zoom: 13,
        center:new google.maps.LatLng(coords.lat,coords.lng),

      });

      //Creamos el marcador en el mapa con sus propiedades
      //para nuestro obetivo tenemos que poner el atributo draggable en true
      //position pondremos las mismas coordenas que obtuvimos en la geolocalización
      marker = new google.maps.Marker({
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(coords.lat,coords.lng),

      });
      //agregamos un evento al marcador junto con la funcion callback al igual que el evento dragend que indica
      //cuando el usuario a soltado el marcador
      marker.addListener('click', toggleBounce);

      marker.addListener( 'dragend', function (event)
      {
        //escribimos las coordenadas de la posicion actual del marcador dentro del input #coords

        var latGet = this.getPosition().lat();
        var lngGet = this.getPosition().lng();

        console.log(this.getPosition().lng());

        obtainedCoords(latGet,lngGet);

      });
}

//callback al hacer clic en el marcador lo que hace es quitar y poner la animacion BOUNCE
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

// Carga de la libreria de google maps
// Funcion para guardar los datos en bd
function obtainedCoords(latGet,lngGet){
  var geocoder = new google.maps.Geocoder();
  var lat = latGet;
  var lng = lngGet;

}

If you have seen a similar example and can share it, I would be grateful