angularjs: marker not appearing on google map

Question

I have added google map in my angularjs application but I am unable to show marker on map. I have gone through a number of post on this topic (like: this and this) but it could not help. Below is my code snippet where lat and long are generated from random number:

HTML:

<ion-view view-title="Map">
    <ion-content data-tap-disabled="true">
        <div id="map">
            <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
                <ui-gmap-markers models="markers" coords="'coords'" idKey="'idKey'"></ui-gmap-markers>
            </ui-gmap-google-map>
        </div>        
    </ion-content>     
</ion-view>

Controller:

uiGmapGoogleMapApi.then(function(maps) {
    lat = (Math.random()*(40-20)+20);
    long = (Math.random()*(140-10)+10);
    $scope.map = { center: { latitude: lat, longitude: long }, zoom: 8 };        
});



uiGmapIsReady.promise(1).then(function(instances) {
    instances.forEach(function(inst) {
    var map = inst.map;
    var uuid = map.uiGmap_id;
    var myLatlng = new google.maps.LatLng(lat,long); 
    var mapOptions = { 
        zoom: 4, 
        center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);  
    var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: 'test!' 
    });

Can anyone please help to know what to change to make the marker seen on the google map. Below is the map shown which currently does not have marker:

If this is javascript, you can not use `long` as variable name, it is reserved keyword. — Ivan Jovović, Aug 04 '15 at 11:41
@IvanJovovic yes it is...but I am able to use. I even checked it with a log message and it prints the `long` value properly. — arin1405, Aug 04 '15 at 11:46

score 0 · Answer 1 · answered Aug 04 '15 at 23:59

I am not able to see the initialize function in your controller code. Please make sure that you define the initialize function in the global context.

angular.module('main', ['ionic'])
    .controller('LocationCtrl', function ($scope, $ionicLoading, $compile, $window) {
    function initialize() {
        google.maps.event.addDomListener(window, 'load');

        var myLatlng = new google.maps.LatLng(43.07493, -89.381388);

        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

        //Marker + infowindow + angularjs compiled ng-click
        var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
        var compiled = $compile(contentString)($scope);

        var infowindow = new google.maps.InfoWindow({
            content: compiled[0]
        });

        var marker = new google.maps.Marker({
            //your random marker generation code
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });

        $scope.map = map;
    }

    $window.initialize = initialize; // callback in global context

    function loadScript(src) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        document.getElementsByTagName("head")[0].appendChild(script);
        script.src = src;
    }

    loadScript('http://www.google.com.mt/jsapi');
    loadScript('http://maps.googleapis.com/maps/api/js?key=&v=3&sensor=true&callback=initialize');



    $scope.centerOnMe = function () {
        if (!$scope.map) {
            return;
        }

        $scope.loading = $ionicLoading.show({
            content: 'Getting location',
            showBackdrop: false
        });

        navigator.geolocation.getCurrentPosition(function (pos) {
            $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            $scope.loading.hide();
        }, function (error) {
            alert('Unable to get location: ' + error.message);
        });
    };

    $scope.clickTest = function () {
        alert('Example of infowindow with ng-click')
    };
});

score 0 · Accepted Answer · answered Aug 05 '15 at 06:33

I have removed mapOptions and map as no need to initialize map once again. And marker is coming properly now.

uiGmapIsReady.promise(1).then(function(instances) {

    instances.forEach(function(inst) {
    var map = inst.map;
    var uuid = map.uiGmap_id; 
    var myLatlng = new google.maps.LatLng(lat,long); 
    var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: '' 
    });

});

angularjs: marker not appearing on google map

2 Answers2