I'm trying to develop an asp.net project using Google Maps and JavaScript. For three days my map was opening perfectly. But today the map zoom and other map control buttons are coming but map doesn't come. Instead map grey blank is coming.
HereIsTheImage and here is my js code:
function LoadHarita() {
var myLatlng = new google.maps.LatLng(33.3, 33.3);
var myOptions = {
zoom: 16,
center: myLatlng,
disableDefaultUI: true,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
}
What's the problem? The map quota or limits? But what kind of limits for 3 days? I didn't understand it.
Thanks guys. Solved the problem. Here is the details if anyone needs it.
I opened the console by pressing F12. There was saying that i've added multiple maps.
I wrote the google map javascript codes under http://maps.google.com/maps/api/js to top of my javascript code. I deleted all these code on my js. And my map comes :) Normally i won't able to reach the map yesterday because i've added these codes yesterday. Maybe cookie is the reason. Whatever my map comes :) Thanks again
I had the same problem. Turned out it was Internet Explorer's 'Compatibility view' that was wrecking Google's Map code when running in localhost. Turning compatibility view off in IE11 made it work again.
The API call limit for Google Maps is 25000/day or something. It's very unlikely you managed to hit that just by playing around while developing. Try running your code in different browsers to see if it makes any difference.
Related
i have a map that shows some markers on it . what i want to do is that if a user is from city a the map initiates on city a and if a user is from city b the map initiates from b . so now what i have is like below :
var myMap = new L.Map('map', {
maptype: 'dreamy',
poi: true,
traffic: true,
center: [35.699739, 51.338097],
zoom: 8
});
according to the documentation i added center which is an array of latlong now i want to get the user location and set it instead of center .
To get the user's location, you will need to use the Javscript Geolocation API.
Based on the example at W3 Schools:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
var myMap = new L.Map('map', {
maptype: 'dreamy',
poi: true,
traffic: true,
center: [position.coords.latitude, position.coords.longitude],
zoom: 8
});
// ... do more stuff with your map
});
}
You will likely want to introduce some error handling in the above.
Alex T's answer fetches the user's location correctly, but it is not good practice to initialise the map in the getCurrentPosition() callback. If the map is already initialised elsewhere, this will overwrite the original map with a new one, which in Alex's example would not be accessible elsewhere in the code, since myVar is a local variable inside the callback. If the map isn't already initialised, then it won't load at all if the geolocation fails or is blocked by the user. Instead, it is better to initialise the map first with a default location, and then pan it to the correct place if geolocation succeeds:
var myMap = new L.Map('mapid', {
maptype: 'dreamy',
poi: true,
traffic: true,
center: [35.699739, 51.338097],
zoom: 8
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => myMap.panTo([position.coords.latitude, position.coords.longitude]),
(err) => console.warn(`Geolocation error (${err.code}): ${err.message}`),
{ timeout: 20000 } // Timeout in ms
);
}
As an aside, when I tested my answer, I was getting strange error messages, until I remembered I had a browser plugin installed to hide my location from websites. Once I disabled that, it worked fine. Also make sure that the code is running in a secure context (e.g. over https - see the Geolocation API documentation for more details.
I'm building a site for a customer who wants a map on their "About Us" page showing their locations. I have the map working and fully functional on the desktop site (www.al-van.org/jake/aboutUs.html) using the Google Maps Javascript API. Everything is going good but when I try to view the site on my android device, I just get an "Oops something went wrong see the error console for more technical information" which doesn't help me a whole lot. I can't seem to figure out what is going on and why it won't work on mobile. I need to use the Javascript API because the client wants 2 locations on the map and the embed api won't do that. Here is my JS, the HTML is a simple div with a bootstrap framework.
<script>
function initMap()
{
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: {lat: 42.389795, lng: -86.258617},
styles: [
{elementType: 'geometry'},
{elementType: 'labels.text.stroke'},
{elementType: 'labels.text.fill'}
]
});
// array used to label markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Add some markers to the map.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {imagePath:
'googlemaps/m'});
}
var locations = [
{lat: 42.390337, lng: -86.259642},
{lat: 42.388635, lng: -86.257246}
]
</script>
<script src="googlemaps/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?
key=API_KEY&callback=initMap"></script>
After working with Google Support, it seems that the issue is in the way that the android Chrome puts in the website. I had explicitly set my allowed HTTP referrers all including www.blahblahblah.com and various variations using wildcards. What I DID NOT DO was include a wildcard in place of the "www" When I placed my wildcard as blahblah.com it allowed it to work on the mobile phone. For some reason, unless you explicitly type "www.example.com" into your android Chrome browser, it will not auto-fill the "www." This is what solved my issue, I hope it helps in the future.
Your API key is invalid for the domain, or is over it's quota limit.
Go here: https://developers.google.com/maps/documentation/javascript/get-api-key
To get an API key for the domain you are using.
Today I was trying add a google map(satellite view) to my project when i located my place in google map site its looks like below
Captured from maps.google.com:
When I load same location in my web site this looking like below
captured from my project :
am using below code to do this stuff am missing anything ...
var map = new google.maps.Map(document.getElementById('map-tool'), {
zoom:6,
center: {lat: -37.729737, lng: 144.814376},
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: true,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID
});
My question is how do I get a clear satellite map view like what we get in maps.google.com in JavaScript API?
Any help will be appreciated.
Only Google Maps for Work API will give you the access to the latest and higher resolution images. The images shown on the maps.google.com are extruded with elevation data on it and displayed in WebGL canvas, it is expected to look differently than what you see when simply use the out-of-box satellite view from the API.
I've been searching for a map API that allows me to see in a 45 degree angle, such as Google Earth does.
So far I haven't found any, and I know that Google Maps and Bing Maps do not have this function. And any others found do not include the country required: Portugal.
I'm searching for, preferably, a map that is not installed by a plugin, but in last case, I will work with that.
With google maps this is possible. You must use the tilt property in mapOptions
var mapOptions = {
center: new google.maps.LatLng(36.964645, -122.01523),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE,
tilt: 45
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
Look at this sample from google dev
Having an odd problem printing an API-generated (V3) Google Map from Internet Explorer 7 & 8.
I generate my map with JavaScript similar to the following:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var centroid = new google.maps.LatLng(35.9948166667, -83.9781791667);
var myOptions = {
disableDefaultUI: true,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: centroid
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker0 = new google.maps.Marker({
position: new google.maps.LatLng(36.1102, -83.9208),
map: map
});
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(36.001, -83.8646),
map: map
});
}
</script>
Typically there are about 25-35 markers on any of my maps. These print just great from Safari, Firefox, and Chrome, on both OS X & Windows XP. But, as soon as I try to print from Internet Explorer 7 or 8, the maps go all crazy: they overflow their boundaries that I set in the print CSS and the markers disappear from the map, leaving just a blank spot on the map.
Anyone encountered this/know how to proceed?
TIA.
IIRC, you'll have to use the Google Static Maps API if you want printer friendly maps.
It should be pretty easy to build the Static Maps API URL request string from the LatLng or your markers. One caveat is that the URL is limited to 2048 characters including any character escapes, this will limit how many markers you can have on the map at one time.
[Edit] In the Javascript API, markers have the class 'gmnoprint', which disables them from showing up on the printed rendering. You can iterate through the markers and remove this class, which should allow them to be printed on the page. As far as I know, this will not work for the direction lines.