I have a KML export from google maps, and some pointers have images or youtube videos. When i open the kml i see a tag on some pointers with youtube and image links. But when i load them into the Google Maps Api i cant see these urls.
This is what i have:
function initialize() {
var mapOptions = {
center: { lat: 52.448346, lng: 4.602585},
zoom: 12
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var kmlLayer = new google.maps.KmlLayer({
url: 'test_1.kml',
clickable: true,
preserveViewport: true,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
console.debug(event);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Is there something to extract the media from the pointers?
My solution would be to export to a xml or json then build a map from it since ExtendedData of kml is partially supported by design, check out the documentation here
Here a possible duplicate of this question: Accessing ExtendedData information via Google Maps API v3
Related
I am using the Google Maps JavaScript API in combination with an api key. This works great for some hours or days, but after a specific intervall I get the following 403 error and the map is gone:
I don't know where the problem is because I didn't have reached the 25.000 requests per day yet. If I reset the api key and reload the page the map is loading correctly again, but I don't wanna reset the api key again and again.
As you can see I am using a custom map, but I don't think that the code is the problem, but here is the code:
(function(window, google){
var infoWindow = null;
function init() {
var map;
var mapOptions = {
zoom: 12,
scrollwheel: false,
center: new google.maps.LatLng(
51.050409,
13.737262
),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById('map'),
mapOptions
);
setMarkers(map, locations);
infoWindow = new google.maps.InfoWindow({
content: "holding..."
});
}
function setMarkers(map, locations) {
var i, icon, marker, contentString;
for (i = 0; i < locations.length; i++) {
icon = '../Images/icn-marker.png';
contentString = '<div><b>' + locations[i][0] + '</b><br>' + locations[i][1] + '<br>' + locations[i][4] + '</div>';
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map,
title: locations[i][0],
icon: icon,
html: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(this.html);
infoWindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', init);
})(window, google);
Any my script include looks like the following:
<script src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY"></script>
<script src="http://example.de/example/map.js"></script>
Hope you can help, because I dont' know where the problem is.
The 403 error response indicate that your API key is not valid or was not included in the request. Please enxure that you have included the entire key and that you have enabled the API for this key.
Also, check your usage limit, if you exceed the usage limits or otherwise abuse the service, the web service will return a specific error message. If you continue to exceed limits, your access to the web service may be blocked. It is also possible to receive 403 Forbidden responses.
The problem can be address by combining two approaches:
Lowering usage, by optimizing applications to use the web services more efficiently.
Increasing usage limits, when possible, by purchasing additional allowance for your Google Maps API for Work license.
Note:
When requests fail, you should ensure that you retry requests with exponential backoff. For example, if a request fails once, retry after a second, if it fails again, retry after two seconds, then four seconds, and so on. This ensures that broken requests or wide scale failures do not flood Google’s servers, as many clients try to retry requests very quickly.
Here's a related SO ticket encountered 403 error response: Google static map API getting 403 forbidden when loading from img tag
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
I am using following code to get the location of user in phonegap (it works fine)
function getLocation() {
var win = function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var myOptions = {
center: myLatlng,
zoom: 7,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map_element = document.getElementById("displayMap");
var map = new google.maps.Map(map_element, myOptions);
};
var fail = function(e) {
alert('Error: ' + e);
};
var watchID = navigator.geolocation.getCurrentPosition(win, fail);
}
This is working fine by centering the user's current location on the map. But I would like to show an indicator (a red dot) on the user's location. But I can see that google API provide only 3 options center, zoom and mapTypeId.
Are there any available options that can be used to highlight the position or is there a workaround?
EDIT
Was able to find that google maps API has a marker ho highlight any position. That looks helpful, but that shows a default red balloon, can that be modified by a custom image?
You can use the newly released GeolocationMarker which is part of the Google Maps API Utility Library.
It will add a marker and accuracy circle at the user's current location. It also allows a developer to customize the marker using the setMarkerOptions method and specifying an icon property.
Use icon inside marker like
var Marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: "",
icon: /bluedot.png
});
you can use this google map location indication circular blue dot icon similar to the google map
You can use MarkerOptions to set a custom image. Check the Google Maps Javascript API V3 Reference to more details about Google Maps.
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.