I have started working on Google maps recently.What I have done till now is to get current location(position) on Google map.It works fine and displays the current position successfully.
But when I place the "!DOCTYPE html" tag in the very first line of my html code, the map is not displayed.
Also, I replaced the "%" in div tags "style" attribute with the "px" (pixels) when I used the "!DOCTYPE html" tag in my document, but it didn't worked.
I am using both Google Chrome (version 21.0.1180.41) and Firefox (version 14.0b12) web browsers to display the map, but it doesn't work for any of them.
What may be the possible reasons? Please answer.
Thanks!
Related
I am working on a website that uses Google Maps but I can't get the map to show on Firefox. I am using this basic code to initialize the map.
function initialize()
{
var mapProperties = {
center:new google.maps.LatLng(33.9000,35.5333),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
googleMap = new google.maps.Map(document.getElementById("mapDiv"),mapProperties);
googleMap.addListener('click', function()
{
if(infowindow!=null)
infowindow.close();
});
}
The function initialize is called when the page loads.
In the document head, I am including this script:
<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js'></script>
The map works fine in google chrome and internet explorer, but is invisible in firefox. In firefox, the div containing the map ("mapDiv") seems to be initialized with the map content when I inspect the html, but the div is transparent and the map doesn't show.
I have tried clearing the cache and starting firefox without plugins in safe mode but the issue remains. I appreciate any help in advance. Thank you
Thanks to all who replied. The issue has been solved. The problem was that I had my map div inside a table cell but the table cell did not have a height set. After setting a height of 100% to the the table cell, the map shows properly.
Also check if firefox browser privacy tracking is unchecked. This feature in firefox 42 onwards prevents display of maps which otherwise display in chrome and IE. I dont know why map display code should affect tracking in firefox. What worked for me in firefox 48.0 was to disbale tracking. Go to menu - options which opens about:preferences page. In Privacy uncheck tracking. These mindless browser updates developer do not apply their mind.
I was having this problem, map was only appearing in Chrome. I added to src= the tag &sensor=true -- example:
src="http://maps.googleapis.com/maps/api/staticmap?center=Tombouctou,Mali&zoom=12&size=350x350&sensor=true"
Now it appears in both Chrome and Firefox.
I encounter a problem when I want to display an SVG image with the library D3.js on Google Chrome.
Below is the code:
var svg = d3.select("body").append("embed");
svg.attr("src","img/drawing.svg").attr("type","image/svg+xml");
This code works on Firefox, but not on Google Chrome (same problem if I use object instead of embed).
But if I add this style to my SVG picture : attr("style", "display:block"), my picture displays on Google Chrome.
...Can someone explain me what happens? Because it's pretty ugly to display my image like that.
According to w3schools, the embed tag is "deprecated in HTML4 and XHTML (but allowed in HTML5)". You should use the object tag. The following snippet works in my Chrome:
var svg = d3.select("body").append("object");
svg.attr("data", "http://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg")
.attr("type","image/svg+xml");
I'm have a conflict with Google Maps v3 API and Mootools. For some reason when the page where the maps is on is loaded it looks fine but about 10 seconds later the map disappears as well as all but 1 pin point.
You can see it here: http://goo.gl/Sr0b2
If I remove mootools.js which loads in my footer, the problem goes away but then some of the javascript on my WordPress theme doesn't work such as the drop down menu in the header so removing mootools is not an option.
Anyone know what may be causing the conflict and how I can fix it?
Any help is appreciated.
I solved the problem by using an iframe for the map, this way the mootools.js on the page doesn't affect the map script. I usually don't use iframes but in this situation it doesn't affect the site's SEO or anything else and it's a perfect solution. So if you have this same issue you can load the map on a page of its own (with nothing but the map) and then insert it anywhere with
I try to manage some changes at the code of Joomla Module file that show a google map to get it working center automatically on user location:
i found on the google documentation this script write in Google maps api V3 for geocode that works great standing alone and seems to be very accurate. See it on this page: http://www.urbanclaim.com/new.php
i already have this problem: (you can see it using the link above)
after a user click on for sharing his location, never changes in the module's map. i try to put an alert in the code ang give me a null value for the local coordinates.. someone of you can help me with a debug in firebug o give me an advice on this?
i SOLVED it..this site is really useless.
In your javascript you are looking for a element with the ID of location but I do not see the element in the DOM nor do I see it being added by your JavaScript, once I added a element with that ID to the DOM via FireBug, your code worked for me.
When looking at a listing for eBay, for example:
http://catalog.ebay.com/Apple-iPod-classic-5th-Generation-Black-30-GB-/60655662?_pcatid=39&_refkw=ipod&_trkparms=65%253A12%257C66%253A2%257C39%253A1%257C72%253A4030&_trksid=p3286.c0.m14
The Price Trends chart shows up as iframe apparently using HTML 5 canvas. But IE does not support canvas element but still it shows up correctly in IE. How does it works in IE? Also it appears the src attribute of iframe is empty but there is HTML content within the iframe. How is this happening?
But my main question is how it is working in IE?
It uses a charting library called jqplot.
If presented to IE this calls it's excanvas script
Example of which is here
Excanvas