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
Related
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)
}
});
I've disabled streetview controls like so:
var mapOptions = {
zoom: 16,
center: myCenter,
streetViewControl:false
};
var map = new google.maps.Map(
document.getElementById("map"),
mapOptions
);
Which takes the streetview control off of the map BUT if you click on a point of interest with a panoramic image / link to streetview then click that image you are again taken into streetview mode.
I want to keep my points of interest but I want to disable maps from going into streetview mode. Is this possible?
Solution
Using the answer below I added a few more items:
.gm-rev, .gm-sv-label{display:none;}
.gm-iw, .gm-sm, .gm-wsv{pointer-events:none;}
2 possible options(there may be more):
prevent the streetView from being visible:
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function(){
if(this.getVisible()){this.setVisible(false)}
});
try to make the streetview-link in the infowindow un-clickable
.gm-sv-label{display:none;}
.gm-wsv{pointer-events:none;}
I would suggest to use both options together, because the 2nd option may fail in the future(the classNames may change)
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...
I have another question which needs resolving as it is rather irritating. I have been working on an app for a while and i managed to get it working nicely.
Specifically, the google map feature is supposed to have markers which appear and when you click on them, the screen is supposed to zoom in and display some information regarding the marker. Now, I have coded this in and it works perfectly when you test it out on Chrome. But when I tried to port it over to the tab device itself (Samsun Galaxy), there is no activity whenever i try to touch the markers whatsoever.
I am rather baffled and miffed by this, as the action of touching the marker should be the same as clicking on it using a mouse, am I not mistaken? I was wondering if anyone else could give me any help with this, as it is something minor which is causing one hell of a hiccup for me.
The code I have added below:
var marker_icon = new google.maps.MarkerImage('images/map/' + thisIcon + '.png', new google.maps.Size(32, 32));
trafficMarker = new google.maps.Marker({
position: new google.maps.LatLng(TrfAl.lat, TrfAl.lon),
animation: google.maps.Animation.DROP,
map: mapPanel,
icon: marker_icon,
id: 'trafficAlertPanel' + i,
componentId: 'trafficAlertPanel' + i,
});
markerArray[i]=trafficMarker;
google.maps.event.addListener(trafficMarker, 'click', function(){
console.log('clicked!');
LoadIncidentMap(this.id.substring(17));
});
For some reason click events don't fire for taps on android and iOS. One work-around is to use the 'mousedown' event instead, which will fire on tap.
google.maps.event.addListener(trafficMarker, 'mousedown', function(){
console.log('clicked!');
LoadIncidentMap(this.id.substring(17));
});
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.