CODEWITHSUNDEEP
angularjscordovagoogle-mapsvisual-studio-cordovaonsen-ui
Leogreen
Leogreen

Reputation: 701

google map two markers on one map

Hi guys i'm working with this code below , but i don't know is is possible and how i can do to add more one marker and set other DIV to show this position. Anyone know what can i do or give me a tip

Its a cordova application on visual studio

angular.module('app', ['onsen']).
    directive('myMap', function () {
        // directive link function
        var link = function (scope, element, attrs) {
            var map, infoWindow;
            var markers = [];

            // map config
            var mapOptions = {
                center: new google.maps.LatLng(-29.3130754, -50.8542323),
                zoom: 11,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false
            };

            // init the map
            function initMap() {
                if (map === void 0) {
                    map = new google.maps.Map(element[0], mapOptions);
                }
            }

            // place a marker
            function setMarker(map, position, title, content) {
                var marker;
                var markerOptions = {
                    position: position,
                    map: map,
                    title: title,
                    icon: 'images/Maps/blue-dot.png'
                };

                marker = new google.maps.Marker(markerOptions);
                markers.push(marker); // add marker to array

                google.maps.event.addListener(marker, 'click', function () {
                    // close window if not undefined
                    if (infoWindow !== void 0) {
                        infoWindow.close();
                    }
                    // create new window
                    var infoWindowOptions = {
                        content: content
                    };
                    infoWindow = new google.maps.InfoWindow(infoWindowOptions);
                    infoWindow.open(map, marker);
                });
            }

            // show the map and place some markers
            initMap();

            setMarker(map, new google.maps.LatLng(-29.3130754, -50.8542323), 'adress');

        };

        return {
            restrict: 'A',
            template: '<div id="gmaps"></div>',
            replace: true,
            link: link
        };
    });

Upvotes: 0

Views: 698

Answers (1)

IamKarim1992
IamKarim1992

Reputation: 646

Here is a way to add multiple markers on a google maps , u just need an array which contains your required latitude longitude values .

var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
    var myLatLng1={lat: -25.163, lng: 131.644};
    var marker2 = new google.maps.Marker({
      position: myLatLng1,
      map: map,
      title: 'Hello World!'
    });

you could also have an array which contains the array element conataining the latutude and longitude values .

        for (var i = 0; i < locations.length; i++) {  //Your location contains the lat long position 
        var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        title: 'Hello World!'
      });

Upvotes: 1

Related Questions