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.


1 Answer 1


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

<!DOCTYPE html>
    <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% }
    <script type="text/javascript"
    <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"),

            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();
                }, 100);
      google.maps.event.addDomListener(window, 'load', initialize);
<body><div id="map-canvas"/></body></html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.