Jump to content

how to make a google map on my website


cmabill
 Share

Recommended Posts

how to insert google map on website

 

 

 

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 GLatlng cooridinates cooresponding with my API key.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     
  2. "http://www.w3.org/TR...tml1-strict.dtd">
     
  3. <html xmlns="http://www.w3.org/1999/xhtml">
     
  4. <head>
     
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
     
  6. <title>Google Maps Javascript API Example</title>
     
  7. <script src="http://maps.google.c...v=2&key=abcdefg"
     
  8. type="text/javascript"></script>
     
  9. <script type="text/javascript">
     
  10. //<![CDATA[
     
  11. function load() {
     
  12. if (GBrowserIsCompatible()) {
     
  13. var map = new GMap2(document.getElementById("map"));
     
  14. map.setCenter(new GLatLng(37.4419, -122.1419), 13);
     
  15. }
     
  16. }
     
  17. //]]>
     
  18. </script>
     
  19. </head>
     
  20. <body onload="load()" onunload="GUnload()">
     
  21. <div id="map" style="width: 500px; height: 300px"></div>
     
  22. </body>
     
  23. </html>

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

 

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.

Link to comment
Share on other sites

anyone help me identify this code is for V2 or V3.

 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

<script type="text/javascript"

src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">

</script>

<script type="text/javascript">

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(-34.397, 150.644),

zoom: 8,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"),

mapOptions);

}

</script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width:100%; height:100%"></div>

</body>

</html>

 

here is the link from google thank you for your help.

Link to comment
Share on other sites

This thread is more than a year old. Are you sure you have something important to add to it?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.