[GIS] Keep marker constant on Google Maps Javascript

google-maps-apijavascriptmobile

I want to be able to keep a marker constantly in the center of Google Maps on my mobile application.

I have tried using bindTo functionality of Google Maps, which binds the marker to the center of the map, but it seems a bit clumsy.

I have tried doing it using HTML and CSS also, but Google Maps does not allow it.

The same as in Uber app.

Best Answer

This is a fully functional code which may satisfy your requirements:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script type="text/javascript">
        function initialize() {
            var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
                var mapOptions = {
                  center: myLatlng,
                  zoom: 8
                };

            var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);

            var marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title: 'Hello World!'
            });

            google.maps.event.addListener(map, 'center_changed', function() {
                // 0.1 seconds after the center of the map has changed,
                // set back the marker position.
                window.setTimeout(function() {
                  var center = map.getCenter();
                  marker.setPosition(center);
                }, 100);
            });
        }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body><div id="map-canvas"/></body></html>
Related Question