Question

I want to open a custom Jquery popup when a marker is clicked. The url is #popup1 or #popup2 or whatever. I tried the url tag which works for URLs but not for what I want.

Here’s the code:

<div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(35.55, -25.75),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      url: '#popup1',
      map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
      window.location.href = marker.url;
    });

  </script>

This does nothing, I would also like for the marker to be centered in the middle when clicked. I’m grateful for all replies!
Thanks a lot 🙂

Answer 1

Use marker.url = ‘TEXT_WITHOUT_#_SIGN’

window.location.hash = marker.url

And for you can use either map.setCenter(marker.position) or map.panTo(marker.position)
The difference is that setCenter() centers the map instantly and panTo does it with nice smooth move.