Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Googlemaps api

  1. #1
    New Coder
    Join Date
    Mar 2016
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Googlemaps api

    My googlemaps api script has stopped working and I dont't know why. Actually no googlemaps api script works on the webbserver. Due you have any idea what can go wrong with googlemaps api scripts? The script worked 3 weeks ago.

    Im testing this basic script:

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    <h1>My First Google Map</h1>
    
    <div id="map" style="width:100%;height:500px"></div>
    
    <script>
    function myMap() {
      var mapCanvas = document.getElementById("map");
      var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.2), 
        zoom: 10
      }
      var map = new google.maps.Map(mapCanvas, mapOptions);
    }
    </script>
    
    <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
    
    </body>
    </html>
    try it here: http://www.boxstar.se/test/map.html

    I get an error mess in the browser.


    Thanks

  2. #2
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    183
    Thanks
    2
    Thanked 34 Times in 34 Posts
    you need an api key

  3. #3
    New Coder
    Join Date
    Mar 2016
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok thanks.

    I've tested and first time the map was shown perfectly, then I got a blank screen instead. This script should work, with the new api key:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
    	<title>Map</title>
        <meta charset="utf-8">
    	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlMVIOxar_cY6_8Llsn580ceXYVQzv8TM&callback=initMap" async defer></script>
        
    	<script> 
    	var map;
    	var marker;
    
    
    function initialize() {
    
    	var mapOptions = {
    		center: new google.maps.LatLng(40.680898,-8.684059),
    		zoom: 11,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
    
    	map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    	searchAddress();	
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    
    
    function searchAddress() {
    
    	var addressInput = document.getElementById('address-input').value;
    
    	var geocoder = new google.maps.Geocoder();
    
    	geocoder.geocode({address: addressInput}, function(results, status) {
    
    		if (status == google.maps.GeocoderStatus.OK) {
    
          var myResult = results[0].geometry.location;
    
          createMarker(myResult);
    
          map.setCenter(myResult);
    
          map.setZoom(17);
    		}
    	});
    
    }
    
    function createMarker(latlng) {
    
      if(marker != undefined && marker != ''){
        marker.setMap(null);
        marker = '';
      }
    
      marker = new google.maps.Marker({
        map: map,
        position: latlng
      });
    }
    	</script>
    	<style>
    	html {
    	height: 100%;
    }
    body {
    	height: 100%;
    	margin: 0;
    	padding: 0;
    }
    #map-canvas {
      margin: 0;
      padding: 0;
      height: 400px;
      max-width: none;
    }
    #map-canvas img {
      max-width: none !important;
    }
    	</style>
    	
      </head>
      <body>
        <div>
    	  <input type="hidden" id="address-input" value="Sydney">
        </div>   
        <div id="map-canvas"></div>
      </body>
    </html>
    Whats wrong? It should take an address as value and then show on window onload. Nothing strange.
    Last edited by md7dani; 01-08-2017 at 08:00 PM.

  4. #4
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    183
    Thanks
    2
    Thanked 34 Times in 34 Posts
    key is still bad
    try this ...

    Code:
    <!DOCTYPE html>
    <html>
      <head>
    	<title>Map</title>
        <meta charset="utf-8">
    	
        
    	<script> 
    	var map;
    	var marker;
    
    
    function initMap() {
    
    	var mapOptions = {
    		center: new google.maps.LatLng(40.680898,-8.684059),
    		zoom: 11,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	};
    
    	map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions) ;
    
    	searchAddress();	
    }
    
    
    
    
    function searchAddress() {
    
    	var addressInput = document.getElementById('address-input').value;
    
    	var geocoder = new google.maps.Geocoder();
    
    	geocoder.geocode({address: addressInput}, function(results, status) {
    
    		if (status == google.maps.GeocoderStatus.OK) {
    
          var myResult = results[0].geometry.location;
    
          createMarker(myResult) ;
    
          map.setCenter(myResult) ;
    
          map.setZoom(17);
    		}
    	});
    
    }
    
    function createMarker(latlng) {
    
      if(marker != undefined && marker != ''){
        marker.setMap(null);
        marker = '';
      }
    
      marker = new google.maps.Marker({
        map: map,
        position: latlng
      });
    }
    	</script>
    	<style>
    	html {
    	height: 100%;
    }
    body {
    	height: 100%;
    	margin: 0;
    	padding: 0;
    }
    #map-canvas {
      margin: 0;
      padding: 0;
      height: 400px;
      max-width: none;
    }
    #map-canvas img {
      max-width: none !important;
    }
    	</style>
    	
      </head>
      <body>
        <div>
    	  <input type="hidden" id="address-input" value="Sydney">
        </div>   
        <div id="map-canvas"></div>
      </body><script src="https://maps.googleapis.com/maps/api/js?key=Your_Key&callback=initMap" async defer></script>
    </html>
    Last edited by Shaka Zorba; 01-09-2017 at 09:30 PM.

  5. Users who have thanked Shaka Zorba for this post:

    md7dani (01-09-2017)

  6. #5
    New Coder
    Join Date
    Mar 2016
    Posts
    21
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Many thanks. Just wondering, can I borrow your key or is it Unique?

  7. #6
    Regular Coder
    Join Date
    Sep 2010
    Location
    U S of A
    Posts
    183
    Thanks
    2
    Thanked 34 Times in 34 Posts
    because this key has been posted
    it will probably be abused or
    at least overused

    you really should get your own

    https://developers.google.com/maps/d...et-api-key#key


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •