CODEWITHSUNDEEP
javascriptgoogle-maps-api-3ionic-framework
Michele Bravo
Michele Bravo

Reputation: 33

Google maps Javascript API v3 custom markers not shown on ionic app

I'm using google maps javascript API v3 for implementing a map with some markers in my Ionic 1 app. I want to use a custom image for these markers. When I try the application on chrome in my pc the markers are shown without problems, but when I try it on iOS or Android device the markers don't appear.

Here is my function:

function setUserMarkers(locations) {

        var image = {
          url: '/images/user_pin.png',
          // This marker is 30 pixels wide by 50 pixels high.
          scaledSize: new google.maps.Size(30, 50),
          // The origin for this image is (0, 0).
          origin: new google.maps.Point(0, 0),
          // The anchor for this image is the base of the flagpole at (15, 30).
          anchor: new google.maps.Point(15, 50)
        };

        var bounds = new google.maps.LatLngBounds();  

        for (var i = 0; i < locations.length; i++) {
            var site = locations[i];
            var myLatLng = new google.maps.LatLng(site.address_latitude, site.address_longitude);

            var contentString = '<p>' + site.account_site_type_description +'</p>';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                title: site.account_site_type_description,
                zIndex: site.id
            });

            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });
            marker.addListener('dblclick', function() {
                navigateToMap(site.address_latitude, site.address_longitude);
            });

            if (locations.length === 1) {
                map.setCenter(marker.getPosition());
            } else {
                bounds.extend(myLatLng);
                map.fitBounds(bounds);
            }
        }
    }

Could someone help me?

Upvotes: 0

Views: 677

Answers (2)

sellmaurer
sellmaurer

Reputation: 301

Your file path references are automatically relative to the "www" folder.

So if you rely on custom icons in place of the regular balloon markers, make an "assets" folder inside of the "www" folder and reference those icons this way:

var image = 'assets/darkgreen_Marker.png';

Upvotes: 0

plotnik
plotnik

Reputation: 432

You are referring marker url from the root starting it with / and that will not work for Cordova. You should use some relative path for your image, like url: 'images/user_pin.png'

Upvotes: 1

Related Questions