Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Jan Cerveny 2 posts 72 karma points
    Apr 10, 2019 @ 08:40
    Jan Cerveny

    How to focus a pin from JS

    Hello there, and thank you for a great plugin!

    I am working on some frontend functionality, and am aggregating multiple map pins in one map. I'm using Google maps v3.

    At one point, I need to focus (pan+zoom) on a specific marker - or lat/lng coordinates, if that's easier.

    Can you please give me a suggestion on how to do that? I was looking for how to access the google maps instance, but it seems to be used within a local scope. So I don't think I'm meant to access it.

    I tried setting the zoom and center properties, and then refresh the map - but it doesn't do anything:

    var map = terratype.providers['Terratype.GoogleMapsV3'].maps[0];
 = lat;
 = lng;
          map.handle.zoom = 20;
 = lat;
          map._center.lng = lng;
          map.zoom = 20;
  • Jan Cerveny 2 posts 72 karma points
    Apr 10, 2019 @ 09:27
    Jan Cerveny

    I found how to do it:

    var lat: number = 55.711311;
          var lng: number = 9.536354;
          var map: google.maps.Map = terratype.providers['Terratype.GoogleMapsV3'].maps[0].handle;
          map.setCenter({ lat, lng });
  • Jonathan Richards 288 posts 1742 karma points MVP
    Apr 10, 2019 @ 10:23
    Jonathan Richards

    Hi Jan,

    It would be better to gain access to the google map using the Terratype js onload event, and then storing that value in something global for use later.

    In the example below, which needs to be placed after you use @Html.Terratype(), I have presumed there is a button somewhere with an id of 'carnivaltime', that whenever it is clicked the map will zoom to Rio de Janeiro.

        window.mygmap = null;
        terratype.onLoad(function (provider, map) {
            if ( == 'Terratype.GoogleMapsV3') {
                window.mygmap = map.handle;
        //  My custom event
        $('#carnivaltime').click(function () {
            if (window.mygmap != null) {
                window.mygmap.panTo({lat: -25.363, lng: 131.044});

    (I have not tested the above code, it might/will contain errors)


    Jonathan Richards

Please Sign in or register to post replies

Write your reply to: