Google map script to angular directive

Question

Could someone help me translate it to angular directive?

var mapa;
var marker;

function mapaStart() {
mapOpc = {
    center: new google.maps.LatLng(52.348763181988076, 18.61083984375),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapa = new google.maps.Map(document.getElementById("doMeeting"), mapOpc);

marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.348763181988076, 18.61083984375),
    draggable: true,
    map: mapa,
});
marker.setMap(mapa);

// zdarzenia dla markera
google.maps.event.addListener(marker, 'drag', uaktualnijWspolrzedne);
google.maps.event.trigger(marker, 'drag');

// zdarzenia dla mapy
google.maps.event.addListener(mapa, 'click', function (event) {
    marker.setPosition(event.latLng);
    uaktualnijWspolrzedne();
});

}

function uaktualnijWspolrzedne() {
var input_lat = document.getElementById('lat');
var input_lng = document.getElementById('lng');
var punkt = marker.getPosition();

input_lat.value = punkt.lat();
input_lng.value = punkt.lng();
}
google.maps.event.addDomListener(window, 'load', mapaStart);

EDIT

Maybe it wasnt good idea to put in on jsfiddle becouse of configuration jsfiddle .

I put it in on plnkr to make it clear:

http://plnkr.co/edit/EyPOmok6vmvA6Cc2yQws?p=preview

But when i try to implement to my project i get blank border instead google map, (module Geolocation work)

There's already a google maps directive that's part of the angular-ui project: angular-ui.github.io/angular-google-maps/#! — 1.618
– 1.618, Commented Sep 18, 2015 at 20:36

S.Klechkovski · Accepted Answer · 2015-09-18 20:48:55Z

0

Here is your updated Fiddle. There was a problem in the setup and ng-app was not initialized.

// just a comment

answered Sep 18, 2015 at 20:48

S.Klechkovski

4,04519 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:22:26Z

0

Problem is in configuring JSFiddle, not in your code. You need to do:

Remove angular.js script from resources
Select angular.js from dropdown in Fiddle Options (under Frameworks & Extensions)
Select options "No wrap - in head"

Explanations here: Simple AngularJS running on JSFiddle

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Sep 18, 2015 at 20:49

ischenkodv

4,2652 gold badges29 silver badges38 bronze badges

2 Comments

user3819713 Over a year ago

Please look on my Edit

ischenkodv Over a year ago

For me your plunkr works just fine. Probably you already fixed it )

Collectives™ on Stack Overflow

Google map script to angular directive

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related