Google Maps Shows "For Development Purposes Only"

Google Maps shows For development purposes only

Google Maps is no longer free. You have to associate a credit card so that you can get billed if your site has requests that exceed the $200 credit they give you monthly for free. That is why you get the watermarked maps.

For more information, see: https://cloud.google.com/maps-platform/pricing/

Update:
A common problem with the new billing system is that you now have to activate each API separately. They all have different pricing (some are even free), so Google makes a point of having you enable them individually for your domain.
I was never a heavy user of Google Maps, but I get the feeling that there are many more APIs now than there used to be.

So if you're still getting a restricted usage message after you've enabled billing, find out what API you need exactly for the features you want to offer, and check if it's enabled.
The API settings are annoyingly hard to find.

1. Go to this link:
   https://console.developers.google.com/apis/dashboard.
2. Then you select your project in the dropdown.
3. Go to library on the left pane.
4. Browse the available APIs and enable the one you need.

Maps JavaScript API error message for development purpose only

Google is not providing free API access anymore.

You have not enabled billing on your project which is causing this error. You must enable Billing on the Google Cloud Project.

On following link Search for : BillingNotEnabledMapError

Error Briefing : https://developers.google.com/maps/documentation/javascript/error-messages

You need to follow these steps for your Google API project :

Get Started with Google Maps Platform : https://developers.google.com/maps/gmp-get-started

google-map msg ( for devlopement purposes only )

You have a typo in the way you are including the API script (an extra ?)

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js??key=AIzaSyAZvxb5BAGPyDnBg5uaoB-U3y0se0KeAqo"></script>

should be:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZvxb5BAGPyDnBg5uaoB-U3y0se0KeAqo"></script>

updated code snippet:

// necessary variables

var map;

var infoWindow;

var markersData = [];

function initialize() {

  var mapOptions = {

    center: new google.maps.LatLng(32, -6),

    zoom: 7,

    mapTypeId: 'roadmap',

  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // a new Info Window is created

  infoWindow = new google.maps.InfoWindow();

  // Event that closes the Info Window with a click on the map

  google.maps.event.addListener(map, 'click', function() {

    infoWindow.close();

  });

  // Finally displayMarkers() function is called to begin the markers creation

  displayMarkers();

}

google.maps.event.addDomListener(window, 'load', initialize);

// This function will iterate over markersData array

// creating markers with createMarker function

function displayMarkers() {

  // this variable sets the map bounds according to markers position

  var bounds = new google.maps.LatLngBounds();

  // for loop traverses markersData array calling createMarker function for each marker 

  $.get("https://gist.githubusercontent.com/abdelhakimsalama/3cce25789f00c1b84ccb5b231ec455b7/raw/393220f08a02b962e3e764d2b497b318353828db/gistfile1.txt", function(response) {

    markersData = JSON.parse(response);

    //console.log(response);

    for (var i = 0; i < markersData.length; i++) {

      var latlng = new google.maps.LatLng(markersData[i].Latitude, markersData[i].Longitude);

      var Route = markersData[i].Route;

      var Secteur = markersData[i].Secteur;

      var Agence = markersData[i].Agence;

      var CodeClient = markersData[i].CodeClient;

      var PrecisionGPS = markersData[i].PrecisionGPS;

      var Latitude = markersData[i].Latitude;

      var Longitude = markersData[i].Longitude;

      var BarCode = markersData[i].BarCode;

      var NomClient = markersData[i].NomClient;

      var PrenomClient = markersData[i].PrenomClient;

      var NumAdresse = markersData[i].NumAdresse;

      var GeoAdresse = markersData[i].GeoAdresse;

      var Tel = markersData[i].Tel;

      var Whatsapp = markersData[i].Whatsapp;

      var NbrFrigo = markersData[i].NbrFrigo;

      //   var FrigosDetails = markersData[i].FrigosDetails;

      var OpenAm = markersData[i].OpenAm;

      var CloseAm = markersData[i].CloseAm;

      var OpenPm = markersData[i].OpenPm;

      var ClosePm = markersData[i].ClosePm;

      createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NomClient, NumAdresse, GeoAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm);

      // marker position is added to bounds variable

      bounds.extend(latlng);

    }

    // Finally the bounds variable is used to set the map bounds

    // with fitBounds() function

    map.fitBounds(bounds);

  });

}

// This function creates each marker and it sets their Info Window content

function createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NomClient, NumAdresse, GeoAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm) {

  var marker = new google.maps.Marker({

    map: map,

    position: latlng,

    title: CodeClient

  });

  // This event expects a click on a marker

  // When this event is fired the Info Window content is created

  // and the Info Window is opened.

  google.maps.event.addListener(marker, 'click', function() {

    var dicoFrigosDetails = {};

    var HTMLtext = "";

    for (var i = 1; i <= Object.keys(dicoFrigosDetails).length / 4; i++) {

      HTMLtext += '';

    }

    // Creating the content to be inserted in the infowindow

    var iwContent = '<div id="iw_container">' +

      '<div class="iw_title">Code Client : ' + CodeClient +

      '</div>' + // '<div class="iw_content">Précision : ' + PrecisionGPS + 

      '<br />Latitude : ' + Latitude +

      '<br />Longitude : ' + Longitude +

      '<br />Route : ' + Route +

      '<br />Secteur : ' + Secteur +

      '<br />Agence : ' + Agence +

      //'<br />Code-barres : ' + BarCode +

      '<br />prenom de Client : ' + PrenomClient +

      '<br />nom de Client : ' + NomClient +

      '<br />Num Adresse : ' + NumAdresse +

      '<br />GeoAdresse : ' + GeoAdresse +

      '<br />Téléphone : ' + Tel +

      '<br />Whatsapp : ' + Whatsapp +

      '<br />Nbr Frigos : ' + NbrFrigo + HTMLtext +

      '<br />Ouverture Matin : ' + OpenAm +

      '<br />Fermeture Matin : ' + CloseAm +

      '<br />Ouverture après-midi : ' + OpenPm +

      '<br />Fermeture Après-midi : ' + ClosePm +

      //'<br />Ouverture Matin Ven : ' + OpenAmVen +

      //'<br />Fermeture Matin Ven : ' + CloseAmVen +

      //'<br />Ouverture après-midi Ven: ' + OpenPmVen +

      //'<br />Fermeture après-midi Ven: ' + ClosePmVen +

      //'<br />Ouverture Matin Dim : ' + OpenAmDim +

      //'<br />Fermeture Matin Dim : ' + CloseAmDim +

      //'<br />Ouverture après-midi Dim : ' + OpenPmDim +

      //'<br />Fermeture après-midi Dim : ' + ClosePmDim +

      //'<br />IMEI : ' + IMEI + 

      //'<br />Date Passage : ' + Date_Added + 

      '</div>';

    // including content to the Info Window.

    infoWindow.setContent(iwContent);

    // opening the Info Window in the current map and at the current marker location.

    infoWindow.open(map, marker);

  });

}

html {

  height: 100%;

  background: gray;

}

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

#map-canvas {

  height: 100%;

}

#iw_container .iw_title {

  font-size: 16px;

  font-weight: bold;

}

.iw_content {

  padding: 15px 15px 15px 0;

}

<head>

  <link rel="shortcut icon" href="favicon.ico">

  <link rel="icon" type="image/gif" href="animated_favicon1.gif">

  <title>ABC - Map </title>

  <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="css/style.css">

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZvxb5BAGPyDnBg5uaoB-U3y0se0KeAqo"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script type="text/javascript" src="js/map.js"></script>

</head>

<body>

  <button type="button" id="buttons"><a href="http://localhost/innotech/inc/export.php">Télécharger le fichier de données EXCEL</a></button>

  <div id="map-canvas"></div>

</body>

---

Related Topics