Member Avatar for cmabill

I want to use below code for my google map, which is posted on internet and easy to understand, but it doesn't works. I hae get API key but when I replace the original key, I don't know which part of code I need to modified. how to get a latlag cooridinates cooresponding with my API key.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

I think I only need to replace this two parts in color, is there any more place that I should modified.

map1

I think this is the simple way that I could use google map on my website. pls come up with better ways if you could. thanks.

Edited by cmabill because: insert picture
  • 4 Contributors
  • 6 Replies
  • 283 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by riahc3

Recommended Answers

All 6 Replies

Member Avatar for cmabill

hello LastMitch

thank you so much for your input, I have studied the links you provided before, but ufortunately I could fully understand it, that is the reason I come here for some help. I think I don't make it very clear because.

  1. I got the API key v3, and have activated Google Map Coordinate API

  2. it seems that the map code of sample I used is for API key v2, so when google map uploaded, I was reminded that the API key in not valid.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
    type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
  }
}

//]]>
</script>

  3. it's highly appreciated if you or some people could give me a google map sample link that use API key v3.

I am sorry that informtion I provide is not complete and accurate, I only know simple Dreamweaver. thanks.

Member Avatar for cmabill

thank you Riahc,

unfortunately I can't open the link you give here.
I have studied the google tutorial, pls see the link below, I think Hello world is the code I need, do you know it is for API key v3 or not?
https://developers.google.com/maps/documentation/javascript/tutorial#HelloWorld

I am sorry that I can't open the sample URL, maybe the great firewall. can you open Hello world sample?

best

Member Avatar for pritaeas

The title of the page you provided is "Google Maps JavaScript API v3"...

Member Avatar for riahc3 
<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=PUTYOURKEYHERE&sensor=false"></script>
    <script>
      var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

If you truely have a API v3 key, then just copy and paste this code in a HTML page and where it says "PUTYOURKEYHERE", replace it with your API v3 key and it should work perfectly.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.