Geolocation AND custom marker for Google Maps API

Question

I have a map where I currently don't use geolocation. Now that I have SSL on my website, I added it according to the Google Maps API documentation. The issue is though, that I'm getting a label as a marker now, and I cannot figure out how to return it to my custom one.

Can anyone help, and explain how?

My code:

var marker;

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom : 13,
        center : {
            lat : 59.909144,
            lng : 10.7436936
        },
        disableDefaultUI : true,

        //START STYLE
        styles : [{
                "elementType" : "geometry",
                "stylers" : [{
                        "color" : "#ebe3cd"
                    }
                ]
            }, {
                "elementType" : "labels.text.fill",
                "stylers" : [{
                        "color" : "#523735"
                    }
                ]
            }, {
                "elementType" : "labels.text.stroke",
                "stylers" : [{
                        "color" : "#f5f1e6"
                    }
                ]
            }, {
                "featureType" : "administrative",
                "elementType" : "geometry.stroke",
                "stylers" : [{
                        "color" : "#c9b2a6"
                    }
                ]
            }, {
                "featureType" : "administrative.land_parcel",
                "elementType" : "geometry.stroke",
                "stylers" : [{
                        "color" : "#dcd2be"
                    }
                ]
            }, {
                "featureType" : "administrative.land_parcel",
                "elementType" : "labels.text.fill",
                "stylers" : [{
                        "color" : "#ae9e90"
                    }
                ]
            }, {
                "featureType" : "landscape.natural",
                "elementType" : "geometry",
                "stylers" : [{
                        "color" : "#dfd2ae"
                    }
                ]
            }, {
                "featureType" : "poi",
                "elementType" : "geometry",
                "stylers" : [{
                        "color" : "#dfd2ae"
                    }
                ]
            }, {
                "featureType" : "poi",
                "elementType" : "labels.text.fill",
                "stylers" : [{
                        "color" : "#93817c"
                    }
                ]
            }, {
                "featureType" : "poi.park",
                "elementType" : "geometry.fill",
                "stylers" : [{
                        "color" : "#a5b076"
                    }
                ]
            }, {
                "featureType" : "poi.park",
                "elementType" : "labels.text.fill",
                "stylers" : [{
                        "color" : "#447530"
                    }
                ]
            }, {
                "featureType" : "road",
                "elementType" : "geometry",
                "stylers" : [{
                        "color" : "#f5f1e6"
                    }
                ]
            }, {
                "featureType" : "road.arterial",
                "elementType" : "geometry",
                "stylers" : [{
                        "color" : "#fdfcf8"
                    }
                ]
            }, {
                "featureType" : "road.highway",
                "elementType" : "geometry",
                "stylers" : [{
                        "color" : "#f8c967"
                    }
                ]
            }, {
                "featureType" : "road.highway",
                "elementType" : "geometry.stroke",
                "stylers" : [{
                        "color" : "#e9bc62"
                    }
                ]
            }, {
                "featureType" : "road.highway.controlled_access",
                "elementType" : "geometry",
                "stylers" : [{
                        "color" : "#e98d58"
                    }
                ]
            }, {
                "featureType" : "road.highway.controlled_access",
                "elementType" : "geometry.stroke",
                "stylers" : [{
                        "color" : "#db8555"
                    }
                ]
            }, {
                "featureType" : "road.local",
                "elementType" : "labels.text.fill",
                "stylers" : [{
                        "color" : "#806b63"
                    }
                ]
            }, {
                "featureType" : "transit.line",
                "elementType" : "geometry",
                "stylers" : [{
                        "color" : "#dfd2ae"
                    }
                ]
            }, {
                "featureType" : "transit.line",
                "elementType" : "labels.text.fill",
                "stylers" : [{
                        "color" : "#8f7d77"
                    }
                ]
            }, {
                "featureType" : "transit.line",
                "elementType" : "labels.text.stroke",
                "stylers" : [{
                        "color" : "#ebe3cd"
                    }
                ]
            }, {
                "featureType" : "transit.station",
                "elementType" : "geometry",
                "stylers" : [{
                        "color" : "#dfd2ae"
                    }
                ]
            }, {
                "featureType" : "water",
                "elementType" : "geometry.fill",
                "stylers" : [{
                        "color" : "#b9d3c2"
                    }
                ]
            }, {
                "featureType" : "water",
                "elementType" : "labels.text.fill",
                "stylers" : [{
                        "color" : "#92998d"
                    }
                ]
            }
        ]
        //END STYLE
    });

    //CUSTOM MARKER ICON
    var image = {
        url : "img/ridepin.png",
        scaledSize : new google.maps.Size(150, 150)
    };
    marker = new google.maps.Marker({
            map : map,
            draggable : true,
            icon : image,
            animation : google.maps.Animation.DROP,
            position : {
                lat : 59.909144,
                lng : 10.7436936
            }
        });
    marker.addListener('click', toggleBounce);
    //END CUSTOM MARKER ICON


    // GET POSITION
    infoWindow = new google.maps.InfoWindow;

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = {
                lat : position.coords.latitude,
                lng : position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('I don\'t want this marker!');
            infoWindow.open(map);
            map.setCenter(pos);
        }, function () {
            handleLocationError(true, infoWindow, map.getCenter());
        });
    } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
    }
    //END GET POSITION
}

//BOUNCE WHEN MARKER IS PRESSED
function toggleBounce() {
    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
    } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
    }
}
//END BOUNCE WHEN MARKER IS PRESSED

Answer 1

Use setPosition method on your marker instance, instead of using infoWindow instance.

Check this snippet adapted from your code:

var map, marker, infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {
      lat: 59.909144,
      lng: 10.7436936
    },
    disableDefaultUI: true,
    //START STYLE
    styles: [{
        "elementType": "geometry",
        "stylers": [{
          "color": "#ebe3cd"
        }]
      }, {
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#523735"
        }]
      }, {
        "elementType": "labels.text.stroke",
        "stylers": [{
          "color": "#f5f1e6"
        }]
      }, {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [{
          "color": "#c9b2a6"
        }]
      }, {
        "featureType": "administrative.land_parcel",
        "elementType": "geometry.stroke",
        "stylers": [{
          "color": "#dcd2be"
        }]
      }, {
        "featureType": "administrative.land_parcel",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#ae9e90"
        }]
      }, {
        "featureType": "landscape.natural",
        "elementType": "geometry",
        "stylers": [{
          "color": "#dfd2ae"
        }]
      }, {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [{
          "color": "#dfd2ae"
        }]
      }, {
        "featureType": "poi",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#93817c"
        }]
      }, {
        "featureType": "poi.park",
        "elementType": "geometry.fill",
        "stylers": [{
          "color": "#a5b076"
        }]
      }, {
        "featureType": "poi.park",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#447530"
        }]
      }, {
        "featureType": "road",
        "elementType": "geometry",
        "stylers": [{
          "color": "#f5f1e6"
        }]
      }, {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [{
          "color": "#fdfcf8"
        }]
      }, {
        "featureType": "road.highway",
        "elementType": "geometry",
        "stylers": [{
          "color": "#f8c967"
        }]
      }, {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [{
          "color": "#e9bc62"
        }]
      }, {
        "featureType": "road.highway.controlled_access",
        "elementType": "geometry",
        "stylers": [{
          "color": "#e98d58"
        }]
      }, {
        "featureType": "road.highway.controlled_access",
        "elementType": "geometry.stroke",
        "stylers": [{
          "color": "#db8555"
        }]
      }, {
        "featureType": "road.local",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#806b63"
        }]
      }, {
        "featureType": "transit.line",
        "elementType": "geometry",
        "stylers": [{
          "color": "#dfd2ae"
        }]
      }, {
        "featureType": "transit.line",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#8f7d77"
        }]
      }, {
        "featureType": "transit.line",
        "elementType": "labels.text.stroke",
        "stylers": [{
          "color": "#ebe3cd"
        }]
      }, {
        "featureType": "transit.station",
        "elementType": "geometry",
        "stylers": [{
          "color": "#dfd2ae"
        }]
      }, {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [{
          "color": "#b9d3c2"
        }]
      }, {
        "featureType": "water",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#92998d"
        }]
      }]
      //END STYLE
  });
  
  //CUSTOM MARKER ICON
  var image = {
    url: "https://maps.gstatic.com/mapfiles/ms2/micons/grn-pushpin.png",
    scaledSize: new google.maps.Size(32, 32)
  };
  marker = new google.maps.Marker({
    map: map,
    draggable: true,
    icon: image,
    animation: google.maps.Animation.DROP,
    position: {
      lat: 59.909144,
      lng: 10.7436936
    }
  });
  marker.addListener('click', toggleBounce);
  //END CUSTOM MARKER ICON

  // GET POSITION        
  infoWindow = new google.maps.InfoWindow;

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      marker.setPosition(pos);
      marker.setTitle('Your position is '+(Math.round(pos.lat * 100) / 100)+", "+(Math.round(pos.lng * 100) / 100));
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
  //END GET POSITION
}

//BOUNCE WHEN MARKER IS PRESSED
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
//END BOUNCE WHEN MARKER IS PRESSED

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
  infoWindow.open(map);
}

html,
body,
#map {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: none;
}

<div id="map" />

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

Or this jsfiddle: https://jsfiddle.net/beaver71/n25n4ojt/

Answer 2

Probably what you want is to reuse your marker object at the address returned by the geolocation API.

You shouldn't use InfoWindow but the marker object again:

    // GET POSITION        
            infoWindow = new google.maps.InfoWindow;

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                  lat: position.coords.latitude,
                  lng: position.coords.longitude
                };

                //comment following 3 lines, if u don't need the infowindow/label
                infoWindow.setPosition(pos);
                infoWindow.setContent('I want this marker!');
                infoWindow.open(map, marker);
                //following line re-uses your custom marker
                marker.setPosition(pos);
                map.setCenter(pos);
                }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
              });
            } else {
              // Browser doesn't support Geolocation
              handleLocationError(false, infoWindow, map.getCenter());
            }
    //END GET POSITION