how to focus a pin from js

Press Ctrl / CMD + C to copy this to your clipboard.

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
0

How to focus a pin from JS

Bugs / Questions

Umbraco 7
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];
      map.handle.center.lat = lat;
      map.handle.center.lng = lng;
      map.handle.zoom = 20;
      map._center.lat = lat;
      map._center.lng = lng;
      map.zoom = 20;
      map.refresh();
      terratype.providers['Terratype.GoogleMapsV3'].refresh();
```
Copy Link

Jan Cerveny 2 posts 72 karma points

Apr 10, 2019 @ 09:27

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.setZoom(20);
      map.setCenter({ lat, lng });

Copy Link

Jonathan Richards 288 posts 1742 karma points MVP

Apr 10, 2019 @ 10:23
0
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.
```
<script>
    window.mygmap = null;

    terratype.onLoad(function (provider, map) {
        if (provider.id == 'Terratype.GoogleMapsV3') {
            window.mygmap = map.handle;
        }
    });

    //  My custom event
    $('#carnivaltime').click(function () {
        if (window.mygmap != null) {
            window.mygmap.setZoom(20);
            window.mygmap.panTo({lat: -25.363, lng: 131.044});
        }
    });
</script>
```
(I have not tested the above code, it might/will contain errors)

Cheers

Jonathan Richards
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?