Change maker icon size in Google Maps API v3.21 - google-maps

I'm trying to change the size of my marker icons with Google Maps API. Here is my code:
new google.maps.Marker({
position: {lat: this.model.get('latitude'), lng: this.model.get('longitude')},
title: this.model.get('name'),
icon: {
url: this.model.get('iconUrl'),
size: google.maps.Size(50, 50)
}
});
The icon image is naturally 512x512. It is appearing in the correct location on the map, but it is 512x512 instead of 50x50. I've read similar questions and answers for this problem, but none of them seem to address setting the marker size with this version of the API. For example, others use the MarkerImage class, but that class no longer exists in this version.
I've also tried including the scaledSize property in the icon object, but that doesn't have any effect either.
Does anyone know what I am doing wrong? Here is the 512x512 image I would like to display as 50x50:

Looks like I was missing a new and also had to use scaledSize instead of size. This works for me:
new google.maps.Marker({
position: {lat: this.model.get('latitude'), lng: this.model.get('longitude')},
title: this.model.get('name'),
icon: {
url: this.model.get('iconUrl'),
scaledSize: new google.maps.Size(50, 50)
}
});

Related

Google map with custom marker shape seems not to work

I try to reduce the clickable/mouse-hover area to the round area of ​​the marker with a custom circle shape, but this area is still too big.
new google.maps.Marker({
position: { lat: 40.97, lng: -2.3 },
label: "A",
title: "My custom title",
map: map,
shape: {
coords: [14, 14, 14],
type: 'circle'
}});
You can try with this jsfiddle and see that the hover starts long before you get to the marker and always seems to be rectangular in shape.
I can't explain this behavior but it seems that it only happens on my machine with any browser. The problem no longer occurs on other systems.
Chrome 99.0.4844.51
Windows 10 Pro 21H2

Google Maps custom markers on ionic

I am using custom markers on Google Maps, and they work perfectly on browser mode, but the problem happens with device, I can't get picture of marker, not sure if I am placing image of marker right.
This is the code I am using.
var marker = new google.maps.Marker({
position: myLatLng,
map:this.map,
title: 'Pumpa',
icon: { url: "../assets/img/2.png",
scaledSize: new google.maps.Size(30, 30)
} });
any clues where should I put marker image and what path should I use then.
Not sure what the downvotes on the previous answer are about, using
url: "assets/img/2.png"
works for me
i think you need to remove the 2 dots in url of icon

Google maps marker icons - loss in image quality when resizing

I'm having icon image quality issues when resizing my own map marker icons (png files) in google maps.
Here is an example of the problem:
Taking Google's 'Simple markers' example code:(developers.google.com/maps/documentation/javascript/examples/marker-simple)
and adding only a new 'icon' object (which I believe has replaced MarkerImage object from v3.11 maps api) gives me the following code (http://codepen.io/anon/pen/AIgkf?editors=100):
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var myicon = {
url: 'https://bnuviq.dm2301.livefilestore.com/y2pOGYfm607bdir1fks45DMUo0i9S-R5cZ1yc2Fy6kE6UAqf9qlmcHnwSeMvLrnAFz4YEFrYEu3JxMZBWHOxloZdlHmRhsuZmQR4rdP1G7K76o/blue_20.png?psid=1',
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(24, 24),
anchor: new google.maps.Point(12, 12)
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: myicon,
//draggable: true, // uncomment this draggable property or set draggable=false and icon displays correctly in Chrome???
title: 'Test custom map icon'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
My original png is 100x100 pixels but the image quality of the resized 24x24 icon is not very good. The edges of the white numbers become jagged.
I am using an original png file of 100x100 pixels because I want to use the same image file for both web and iOS/Android apps and the apps want to use larger map icons to prevent pixelisation.
Browser behaviour:
Chrome (Windows/Ubuntu)
icon image quality not good - numbers have jagged edges
Strangely however, if the marker's 'draggable' property is set to 'true', Chrome displays the icon correctly i.e. with no jagged edges???
Firefox (Windows/Ubuntu)
icon image quality not good - numbers have jagged edges
IE (Windows)
icon image quality not good - numbers have jagged edges
Can anyone suggest how to get my resized map icons displaying better?
Is the problem the large size of the original png file or something else? And any ideas why the icon displays correctly in Chrome when 'draggable=true'?
Thanks in advance
p.s. first post, apologies if I've left anything out
Try setting the optimized property in the marker options to false:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: myicon,
optimized: false, // <------
title: 'Test custom map icon'
});
This ensures that the marker is rendered as a separate DOM element by the browser and the scaling will be better quality.
No need to set draggable to true.
In Maps V3, when you add a custom marker that is not draggable, maps will draw it on the map tiles at the google server, and then send it down to you. When you mark it as draggable, it becomes it's own DOM object. When it is its own DOM object, the browser handles the resizing of the icon, when it is resized at google, their servers handle it. Seems to me that the algorithm Google uses to resize the icon is not as good as the one the browsers use. (and additionally, the algorithm that Chrome uses is better than the one in FF, at least for handling the resizing of text).
Have you considered using custom icons without text in them? they will most definitely appear better when resized. You could always add the text in the infowindow instead...

Google maps grid lines appearing

For some unknown reason grid lines are appearing on my map in all browsers. I have looked for a solution but nothing seems to fix it. Every solution I have found says you need to set your browsers to compatibility mode.
function Initialize() {
var centerPosition = new google.maps.LatLng(40.747688,-74.004142);
var options = {
zoom: 8,
scrollwheel: false,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: centerPosition,
map: map![enter image description here][2]
});
};
It is a CSS problem. Your CSS is being applied to the map tiles (images).
I had a similar problem where lines appeared over the Google Map. Upon careful inspection, I found that the problem only reproduced in Chrome. There is an answer given in a similar question:
Google Maps random vertical line in Chrome
The short version is that when you zoom in and out in Chrome, a bug in the browser causes lines to appear. Hopefully, this bug will be fixed soon and this answer will be obsolete!
Also, in the case that the place on the map is Hawai'i, there is a vertical line between the islands of O'ahu and Moloka'i and a horizontal line between the islands of O'ahu and Kaua'i. These lines appear to be part of the map, for some reason, and are not the result of a browser defect.

Changing markers icons in Google Maps application

Is there an easy way to change the marker when embeding a googlemap with Jquery/javascript?
EDIT
bonus Question
Is there a way to use an address instead of LatLng?
Google Maps API V3 is now the official version.
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Icons
When you declare the markers use the "icon" property to set an image.
From the documentation:
var image = 'beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
You can also use the charts API to generate marker images.
E.g. http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000 for a red pin
http://groups.google.com/group/google-chart-api/web/chart-types-for-map-pins?pli=1
This example should help you: http://code.google.com/apis/maps/documentation/javascript/v2/examples/icon-simple.html .
Short description: Create an Icon object and when adding markers set that object as the icon property.