This is my code to new a google map after sliding to the div that displaying the map:
!self.map && (self.map = new google.maps.Map(self.$map[0], {
center : self.location,
zoom : 15,
streetViewControl:false,
scrollwheel:false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}));
The base 2D tiles is transparent in IE8
but not in FF, Safari and Chrome
my suggestion
is "self.$map[0]" is normal html node not jquery object or whatever?
try give it the node id
element should be visible on init.
give it fixed height
Related
I am trying to display Google Maps markers with a circular icon as a SVG path.
I have this HTML:
<div id="map-canvas"></div>
And this javascript:
function initialize() {
let mapOptions = {
zoom: 4,
center: new google.maps.LatLng(48, 20)
}
let map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions)
let circle = {
path: 'M 1, 2 a 1,1 0 1,1 2,0 a 1,1 0 1,1 -2,0',
anchor: new google.maps.Point(2, 2),
scale: 10
}
let marker = new google.maps.Marker({
position: map.getCenter(),
icon: circle,
map: map
})
}
google.maps.event.addDomListener(window, 'load', initialize);
http://jsfiddle.net/ea32j950/
Google Maps renders the SVG path as an img tag inside a div tag.
Without touchscreen, both tags have calculated dimensions width: 30px; height: 30px;, which is as expected (in all browsers I tested).
But on a laptop with touchscreen there are some unexpected margins rendered. Both img and div tag have calculated dimensions width: 46px; height: 46px;. Both in Chrome and Firefox:
How can I prevent this difference? Is there a way to override the setting window.navigator['maxTouchPoints'] of the client?
Edit: "Device Manager -> Human Interface Devices -> HID-compliant touch screen -> Disable" seems to cause window.navigator['maxTouchPoints'] = 0 and the issue is gone. Is there any other workaround, which keeps the touchscreen functionality outside of the webpage?
When I draw two markers close to each other, hovering over the marker with lower z-index causes the tooltip of the other marker to show up due to the margin.
I have tried setting a circular MarkerShape but the problem remains: http://jsfiddle.net/shrt8axj/
Edit: I ended up opening a new issue with Google.
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
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...
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.
I began to use Google Map API recently and I tried the hello world sample in my own webpage. The only difference of my code from the original one is I display the map element in javascript code like this:
function showMap () {
container = document.getElementById("id_container");
container.innerHTML = "<div id=\"map_canvas\"><\/div>";
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
And in the external css file, I defined the width and height by fixed values for #map_canvas.
But I didn't get the expected result. The map showed for about 1 second and became all white (see the image below). When I zoom the map, I can see it flashing. I have searched on Google but I didn't get any solution and I don't even know what the problem is. Has anyone encountered the same problem before?
After several days' trying, I know what's happening --
I set the background attribute of all divs to be white. Though I reset the background of the map div to be "none", it doesn't work. The only solution is to avoid any definitions that would possibly give it a not "none" background, like "div {background-color: white;}".
However, feel free to set the background color of its parent tags.