Question

63

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

rated 0 times [ 69] [ 6] / answers: 1 / hits: 55472 / 11 Years ago, thu, august 8, 2013, 12:00:00

I have seen that many users have asked this question, but in fact there is still no answers with examples of how to use Google Maps without a key (all the answers are references to another webpages).

I have managed to use Google Maps without the key, but I only managed to get a static map. Do you have any idea how do this 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 you simply click this link you can see the map, and if you change the url properties you can edit the map:
http://maps.googleapis.com/maps/api/staticmap?center=-32.0000343,-58.0000343&zoom=5&size=300x300&sensor=true&visualRefresh=true

When I say dynamic map I mean to somethins like this: https://google-developers.appspot.com/maps/documentation/javascript/v2/examples/map-simple

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

irvinjovannix

Add To Favorites

Follow

Total Points: 416

Total Questions: 94

Total Answers: 117

Location: South Korea

Member since Sun, Aug 8, 2021

3 Years ago

answered 11 Years ago masonm · Accepted Answer

As @geocodezip said, You're looking for Google Maps Javascript v3.

Here is simple example of using it(picked from my old answer), this doesn't need any 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 even customize the icons here

    });



     //=====Initialise InfoWindow

    var infowindow = new google.maps.InfoWindow({

      content: <B>Skyway Dr</B>

  });



   //=====Eventlistener for InfoWindow

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

    infowindow.open(map,marker);

  });

}



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

I have created a simple fiddle for your reference.

Hope you got some idea.

Since you're not interested in using keys, Beware of the limits.

Google Maps Javascript API : up to 25,000 map loads per day for each
service.

This includes:

a map is displayed using the Maps JavaScript API (V2 or V3) when

loaded by a web page or application;

a Street View panorama is displayed using the Maps JavaScript API (V2
or V3) by a web page or application that has not also displayed a
map;

a SWF that loads the Maps API for Flash is loaded by a web page or
application; or

a single request is made for a map image from the Static Maps API.

a single request is made for a panorama image from the Street View
Image API.

From your comments,

I too tried using canvas, it was not working.

 var mapCanvas = document.createElement(canvas);

But this is working good with div element.

var mapCanvas = document.createElement(div);

mapCanvas.style.width = 200px;

mapCanvas.style.height = 200px;

Updated JSFiddle

Don't forget to set width and height properties.