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.
Related
I want to animate (fadein, fadeout) a marker in my GoogleMaps application (Web).
How can i assign any css class to a marker?
Or how can i access the specific marker? Do they have selectors like :after or something?
If not, whats the easiest way of applying animations to them?
The DOMNode that contains the image used for the marker isn't available via the API.
Furthermore, by default the markers will not be single DOMNodes, they will be drawn via canvas.
But the Marker-Image may be accessible via CSS when you use a unique icon-URL for each Marker.
Sample(using jQuery):
<style type="text/css">
img[src^='http://www.google.com/mapfiles/marker.png?i=']{
opacity: 0.5
}
</style>
<script type="text/javascript">
function initialize() {
var index=0;
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
marker=new google.maps.Marker({position:map.getCenter(),
map:map,optimized:false,
icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)});
google.maps.event.addListener(marker,'mouseover',function(){
$('img[src="'+this.icon+'"]').stop().animate({opacity:1});
});
google.maps.event.addListener(marker,'mouseout',function(){
$('img[src="'+this.icon+'"]').stop().animate({opacity:.5});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
How ist works:
The sample uses a single image as Marker-Icon (http://www.google.com/mapfiles/marker.png)
via CSS we apply a opacity. You may notice that there is a i-parameter inside the URL. This parameter will be used to make the img-src unique.
I use a variable which will be incremented to get a unique img-src:
var index=0;
//a few lines later:
icon:'http://www.google.com/mapfiles/marker.png?i='+(index++)
Now you'll be able to select the <img/>-element used for the marker, e.g. onmouseover/onmouseout via a attribute-selector.
When you wan't to use vanilla javascript you may use document.querySelector to access the image.
Note: you must set the optimized-option of the marker to false (this will force the API to render the marker as a single element)
Demo: http://jsfiddle.net/doktormolle/nBsh4/
There is a trick that can work if you for example want to change the cursor for the marker
Add this:
google.maps.event.addListener(YOURMARKER,'mouseover',function(){$(".gm-style div").addClass("markerClass")});
google.maps.event.addListener(YOURMARKER,'mouseout',function(){$(".gm-style div").removeClass("markerClass")});
and
#YOUR-CANVAS .gm-style div {cursor: default !important;}
#YOUR-CANVAS .gm-style div.markerClass{cursor:pointer !important}
works like a charm
An easy way is, select the marker and add a class the that selection.But for that you have to give each marker a title. Any animation would not work except google ones.
$("div[title=\"" + name+ "\"]").addClass("aClass")
I hope this helps someone.
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.
This question already has answers here:
Google map only loading half of itself
(4 answers)
Closed 2 years ago.
I just added a googlemap to a website. I is placed as presented in the toturials in a map_canvas div, and this div is nested inside another div like:
now the problem is that the map tiles stayes in the topleft corner but not the map background like this http://screencast.com/t/jeUSKijjwE
what could be wrong?
This is usually a problem with showing, hiding, or resizing a map.
In google maps v3, I believe you can call google.maps.event.trigger(map, 'resize'); where map is the reference to your google maps object.
I suggest load map with some time delay after checking the div is visible or not which is going to hold the map . Worked for me
$(document).ready(function () {
$('.togglebtn').click(function () {
if(!$('#map_canvas').is(':visible')){
setTimeout(function(){initialize()}, 500);
}
});
});
//your function
function initialize() {
var mapOptions = {
zoom: 3,
center : new google.map.LatLng(31.510474,80.352287),
center: new google.maps.LatLng(44.510474, 50.352287),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var contentSC_PAK = "SoftCircles Pakistan";
.....
.....
and rest of your map code to initialize map
});
}
I had this problem and discovered that in my case the issue was that I was creating the map_canvas div with javascript innerHTML.
The map would display correctly the first time, but the second time I'd call it (different map though) it would display the same map (wrong map), and the third time I'd call another map it would display it only in the top left corner. It would be in the top corner for all the rest of the calls.
All I had to do was put the div in the original HTML, and it works perfectly from there on out.
Hope this helps someone!
You have to use autosizse option. I had same issue, and i solved it.
Here the code when you open a modal and inside it, call a locationpicker.
$scope.map_picker = function(){
$("#map_modal").modal('show');
$('.us2').locationpicker({
location: {latitude: 33.997215339647724, longitude: -81.02654766235355},
radius: 300,
inputBinding: {
latitudeInput: $('.us2-lat'),
longitudeInput: $('.us2-lon'),
radiusInput: $('#us2-radius'),
locationNameInput: $('#us2-address')
}
});
**$('#map_modal').on('shown.bs.modal', function () {
$('.us2').locationpicker('autosize');
});**
}
The main logic is just have to use this line:
$('.us2').locationpicker('autosize');
But it is important how and where you are calling this line.
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
I've been unable to get the basic Google maps example working on my site. I have the following div on my page:
<div id="map_canvas" style="width:100%; height:100%"></div>
And the following in the head of my document:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
jQuery(document).ready(initialize);
</script>
It appears that the elements are getting loaded into my DOM, but there is no visible map on the page.
As per Google Map not showing up, it appears that percentage sizes on the div (e.g. 100%) don't work properly. I had to explicitly specify a pixel height and width for the div.
Use 100% only if you want to show google map on the whole screen..!!
Here is a sample which used 100% width height
http://www.rizeworkshop.com/basic-google-map-v3/
You have jQuery enabled on your site? Otherwise, within your body-tag create a "onload=initialize();"-attribut so that the javascript will be executed.
As far as I know your inital-request needs an API key?
the code looks ok and it's similar to the examples from the documentation so it should be working properly.
Have you tried printing some information on the screen from the initialize function? Check if the latlng, myoptions and map variables are created correctly.
If they are, there's a problem with calling the initialize function...
I tested your code and iw works fine if i use <body onload="initialize()"> as da_didi suggested.
Do you have an import directive for jquery.js?