CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
user2896084
user2896084

Reputation: 13

specify size of custom marker in google map

I am trying to put custom markers on a google map. The icons that I want to use are png files and vary based on the type of point being placed on the map. Both the location of the point and the url of the png file for its marker are being pulled from an SQLdatabase.

The code I am using is as follows

var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lon),
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    //  marker:true
};
var infoWindow = new google.maps.InfoWindow();

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lon);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: data.venue,
        icon: data.image
    });

When this is run, I get very large markers on my map, each marker is the correct one, but they are so large that it looks like a jumble.

Any suggestions on how to control the size of the icon?

Upvotes: 0

Views: 380

Answers (1)

C F
C F

Reputation: 108

You could specify a google.maps.Icon as the MarkerOptions, e.g.

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: data.venue,
    icon: {
        url: data.image,
        scaledSize: new google.maps.Size(32, 32)
    }
});

Upvotes: 2

Related Questions