¿Hay alguna forma de fijar siempre un marcador de Google Maps en el centro de su mapa?

Posteriormente a observar en diferentes repositorios y sitios de internet al terminar hallamos la resolución que te compartimos pronto.

Solución:

En lugar de inyectar un componente HTML como se sugiere en @Dr. Molle’s respuesta, ¿por qué no usa una solución solo de CSS?

Es más simple, más eficiente y no requiere que toques el DOM (por lo que no habrá ningún problema si Google cambia su implementación).

Además, dado que Google Maps no aplica ningún estilo en el elemento contenedor (#map) la solución es bastante segura.

#map 
    position: relative;


#map:after 
    width: 22px;
    height: 40px;
    display: block;
    content: ' ';
    position: absolute;
    top: 50%; left: 50%;
    margin: -40px 0 0 -11px;
    background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
    background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
    pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */

Aquí hay un jsFiddle.

Un enfoque diferente, que no utilizaba un google.maps.Marker:

después de inicializar el mapa, inyecte un div en el contenedor del mapa, asígnele un nombre de clase (p. ej. centerMarker), las demás cosas se harán a través de CSS:

.centerMarker
  position:absolute;
  /*url of the marker*/
  background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
  /*center the marker*/
  top:50%;left:50%;

  z-index:1;
  /*fix offset when needed*/
  margin-left:-10px;
  margin-top:-34px;
  /*size of the image*/
  height:34px;
  width:20px;

  cursor:pointer;

Demostración: http://jsfiddle.net/doktormolle/jcHqt/

Puede escuchar los cambios del centro a través de algo como a continuación, solo tendrá que actualizar su vista:

google.maps.event.addListener(map, "dragend", function() 
   console.log(map.getCenter().toUrlValue());
);

La solución principal utilizada actualmente es abrir InfoWindow solo cuando se hace clic, lo necesitaba todo el tiempo como en Uber, así que reemplacé incluso InfoWindow a una solución solo CSS, actualizando la vista de la ruta angular normal con Ionic

HTML:

 
   
  
  
    locationCtrl.coordinates

CSS:

#map 
 width: 100%;
 height: 100%;

#centerInfoBubble 
  position: absolute;
  /*center the marker*/
 top: 38%;
 left: 22.5%;
 z-index: 1;
 width: 50%;
 height: 6%;
 border-radius: 20px;
 border: 1px solid #111;
 background-color: #444444;
 color: #fff;
 padding: 0.5% 5%;
 cursor: pointer;

#centerMarker 
 position: absolute;
 /*url of the marker*/
 background: url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
 /*center the marker*/
 top: 45%;
 left: 45%;
 z-index: 1;
 height: 10%;
 width: 10%;
 cursor: pointer;

Controlador:

myModule.controller('LocationCtrl',['$scope','$cordovaGeolocation',function($scope,$cordovaGeolocation)
$scope.locationCtrl = 
    coordinates : null
;
var options = timeout: 10000, enableHighAccuracy: true;
var marker;

$cordovaGeolocation.getCurrentPosition(options).then(function(position)

    var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var mapOptions = 
            center : latLng,
            zoom : 16,
            mapTypeId : google.maps.MapTypeId.ROADMAP,
            mapTypeControl : false,
            streetViewControl : false,
            zoomControl : false
    ;

    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
    $scope.locationCtrl.coordinates = $scope.map.getCenter().toUrlValue();

    google.maps.event.addListener($scope.map, "dragend", function() 
        $scope.locationCtrl.coordinates = $scope.map.getCenter().toUrlValue();
        $scope.$apply();
    );

, function(error)
console.log("Could not get location");
);

]);

No sé si todavía hay problemas de rendimiento con esto, pero se ve bastante fluido en el dispositivo, espero que ayude a alguien.

Agradecemos que desees corroborar nuestro estudio ejecutando un comentario y dejando una valoración te damos la bienvenida.

¡Haz clic para puntuar esta entrada!

(Votos: 2 Promedio: 4.5)

Tags : Google Maps / Google Maps Api 3 / Javascript / Mobile /

¿Hay alguna forma de fijar siempre un marcador de Google Maps en el centro de su mapa?

Solución:

Utiliza Nuestro Buscador

Preguntas Relacionadas: