Develop Reference

Google map API in my html website

hello I have a problem I wish to integrate ue google map in my site but I do not understand it appears when I update the page but then it disappears. In the console it says "no APIkey" but I did it several times. I followed the site: developers.google
but I do not understand where the error lies. I put the html part if a person understand the error please ! I also follow this topic google api in my website but nothing appears !
<div id="map"></div>
<script>
function initMap() {
var ff = {
lat: 50.638181,
lng: 3.058227
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: ff
});
var marker = new google.maps.Marker({
position: ff,
map: map
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWdGA-ndsHMtR5-cdZrc5SHtfKKBG5Bfg&callback=initMap">
</script>

Console says:-
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
so activate your google map API key under project.

Your API key is not activated. Make sure to generate a new one following the guide: https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de

Detect query limit message on map load with Google Maps Javascript Api

I have a problem with Google Maps Javascript Api.
I want to detect if my daily limit quota of 25,000 map loads per 24 hours as described here is reached.
I already searched for a lot of similar questions, as [1, 2, 3, 4], but they:
have no useful response (1)
use other Api and not Google Maps Javascript Api (2)
refers to geocoding and not map loading (3)
use Google Api Console (4)
The only question that I find useful is this.
It refers to Google documentation, that says:
If you want to programmatically detect an authentication failure (for example to automatically send an beacon) you can prepare a callback function. If the following global function is defined it will be called when the authentication fails. function gm_authFailure() { /* Code */ };
If I have a simple script like this:
<script>
function initMap() {
var map;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 42.345, lng: 12.46 }
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"></script>
How can I implement function gm_authFailure(), in order to detect query limit reached?
I'm new to Js and have no clue how to do that. Can you give me some examples?

you just need to define your function globally, like this
<script>
function initMap() {
var map;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 42.345, lng: 12.46 }
});
}
function gm_authFailure() {
alert("test"); // here you define your authentication failed message
};
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"></script>
<div id="map" style="height: 500px; width: 500px;"></div>

Microsoft.Maps.AutosuggestManager not returning bestView in Bing Maps V8?

I'm migrating an application from Bing Maps V7 to V8 and I'm having an issue with the AutoSuggest. What I had been doing is when a user makes a selection in the AutoSuggest then the map would center on the location using the bestView attribute returned in the suggestion result and add a pushpin. This worked in V7.
The pushpin does get added correctly in V8 but the map is not being centred. When I checked in the debugger the suggestion result was missing the bestView attribute. When I go the documentation for the SuggestionResult Object bestView is an attribute that should be returned
The link I'm using for Bing Maps is https://www.bing.com/api/maps/mapcontrol?callback=loadMap
The code I'm using is
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: bingMapCredentials,
showDashboard: false
});
Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {
var options = {
maxResults: 4,
map: map
};
var manager = new Microsoft.Maps.AutosuggestManager(options);
manager.attachAutosuggest('#txtSearch', '#searchBoxContainer', selectedSuggestion);
});
function selectedSuggestion(suggestionResult) {
map.setView({ bounds: suggestionResult.bestView });
newAddPinToMap(suggestionResult.formattedSuggestion, suggestionResult.location);
}
Is there a way to get the bestView attribute for suggestionResult? Is this a bug that will be fixed soon or should I be looking for a different value?

Bing Maps in Ionic v1 Framework is not working

I am trying to use Bing maps API in ionic v1 framework app which builds on android,iOS and windows platforms.
I am facing problem in Bing maps which is plotting properly but zoom in,zoom out,changing the map type from aerial to road & fetching current location these buttons are not functional.I have proper API key to access maps. I even tried it doing ionic serve on browser but nothing helped me.
I have followed code from the below link:
https://github.com/eppineda/ionic.bing-map-demo
I have also changed JS src file of bing maps in index.html page from:
src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'
To
src='http://www.bing.com/api/maps/mapcontrol'
The src file i have changed referring to Microsoft document pages as below:
http://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#loadMapAsync+HTML
Issue can be seen in the link -
http://plnkr.co/edit/NO5eLxogOyPHsiXzzpaQ?p=preview
$scope.init = function () {
console.log('Map init');
var mapOptions = {
credentials: '',
mapTypeId: Microsoft.Maps.MapTypeId.road,
center: new Microsoft.Maps.Location(51.5033640, -0.1276250),
zoom: 15,
// showLocateMeButton: false,
// // NavigationBarMode: "default",
// // NavigationBarOrientation: "vertical",
// showZoomButtons: false,
// ShowNavigationBar: false
showDashboard: true
// // showMapTypeSelector : true
// // showMapTypeSelector: false
// navigationBarMode: Microsoft.Maps.NavigationBarMode.compact
};
map = new Microsoft.Maps.Map(document.getElementById('divMap'), mapOptions);
console.log(map);
};
Please help me out to figure this out.It would be really helpful with the solution. Thanks in advance.

I suspect there is one of two issues. The first is that you have some other HTML element above the map and/or navigation bar/buttons. This would block you from being able to press those buttons. The second is that your code is actually loading the map twice somehow and as such you are ending with two maps on top of each other. When this happens the navigation bar for the bottom map ends up on top and using it actually changes the bottom hidden map. I've seen this occur once before in someone else's app who load the map twice to the same div.

Google Map API - 'google' not defined - MVC5 javascript

I get JavaScript "google is undefined" error.
I apologize if this question is similar to this but I am using it in a different setting, so this may be an MVC issue.
I use MCV5 website standard template and I put in the head of _layout.chtml main template:
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
This code goes into one of the views, for the account/index action:
<div id="map_canvas"></div>
<span id="result"></span>
<script>
var map = null;
var markersArray = [];
function initialize() {
var latlng = new google.maps.LatLng(13.73868, 1.07143);
var settings = {
zoom: 14,
center: latlng,
mapTypeControl: true,
scaleControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'white'
};
map = new google.maps.Map(document.getElementById('map_canvas'), settings);
google.maps.event.addListener(map, 'click', function (event) {
document.getElementById('result').innerHTML = 'Lat: ' + event.latLng.lat() + ' Lng: ' + event.latLng.lng();
});
}
window.onload = initialize;
</script>
Somehow the linked google js file does not seem to load by the time function initialize() runs and I get JavaScript "google is undefined" error in the first line of initialize() function.
Thanks for your help.

The only real point where MVC could be an issue is in the loading of your layout. Have you inspected the page source to ensure that the Google Maps API script is actually on the page? If it's not, then you just need to figure out why your view isn't utilizing the layout you think it should be.
If it is on page, then open the link to the JS file and ensure that it loads properly. Especially if you on a corporate network, sometimes firewalls or other security software may prevent certain scripts from loading properly. You'll need to work with your Infrastructure department if that's the case.
Also, watch your usage of SSL. If you're using SSL for the site you're loading this on, then this script won't load because it's coming over HTTP, not HTTPS. In general, it's always better to use the HTTPS version of external resources, as that should work whether your site is running on HTTPS or HTTP. Also, you can just make the URL protocol relative:
<script src="//maps.google.com/maps/api/js?sensor=false"></script>
Assuming it's not one of those annoying instances where the third-party uses an entirely different domain for SSL, it will then request either HTTP or HTTPS depending on what your site is using.