javascript - How to use Google Maps without a key? (from static to dynamic with URL) -

i have seen many users have asked question, in fact there still no answers examples of how use google maps without key (all answers references webpages).

i have managed use google maps without key, managed static map. have idea how dynamic?

var img = new image();  img.src = "http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualrefresh=true";  return img; //or document.body.appendchild(img);  

even if click link can see map, , if change "url properties" can "edit" map: http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualrefresh=true

when "dynamic map" mean somethins this: https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple

as @geocodezip said, you're looking google maps javascript v3.

here simple example of using it(picked old answer), doesn't need keys.

html:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <div id="map-canvas"></div> 

css:

#map-canvas {         margin: 0;         padding: 0;         height: 100%;       } 

javascript:

function initialize() {     var mylatlng = new google.maps.latlng(43.565529, -80.197645);     var mapoptions = {         zoom: 8,         center: mylatlng,         maptypeid: google.maps.maptypeid.roadmap     }     var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);       //=====initialise default marker         var marker = new google.maps.marker({         position: mylatlng,         map: map,         title: 'marker'      //=====you can customize icons here     });       //=====initialise infowindow     var infowindow = new google.maps.infowindow({       content: "<b>skyway dr</b>"   });     //=====eventlistener infowindow   google.maps.event.addlistener(marker, 'click', function() {     infowindow.open(map,marker);   }); }  google.maps.event.adddomlistener(window, 'load', initialize); 

i have created simple fiddle reference.

hope got idea.

since you're not interested in using keys, beware of limits.

google maps javascript api : 25,000 map loads per day each service.

this includes:

1. a map displayed using maps javascript api (v2 or v3) when
   loaded web page or application;
2. a street view panorama displayed using maps javascript api (v2 or v3) web page or application has not displayed map;
3. a swf loads maps api flash loaded web page or application; or
4. a single request made map image static maps api.
5. a single request made panorama image street view image api.

from comments,

i tried using canvas, not working.

 var mapcanvas = document.createelement("canvas"); 

but working div element.

var mapcanvas = document.createelement("div"); mapcanvas.style.width = "200px"; mapcanvas.style.height = "200px"; 

updated jsfiddle

don't forget set width , height properties.