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.
Related
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 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 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.
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