Thursday, January 20, 2011

how to embed google map in website

Recently, I just added gmap to my customer's website
http://northbeachhealth.com/contact.php

Here are instructions:
1, get a free google api key
Here is the page to get key
http://code.google.com/apis/maps/signup.html

2, find longitude and latitude of the address
A, enter your address in gmap
http://maps.google.com/maps?oe=utf-8&client=firefox-a&rlz=1R1GGLL_en___US406&q=367+Bay+St.,+Suite+B+San+Francisco,+Ca.+94133&um=1&ie=UTF-8&hq=&hnear=367+Bay+St,+San+Francisco,+CA+94133&gl=us&ei=Vpw4TdHXN8TflgfYmLmHBw&sa=X&oi=geocode_result&ct=title&resnum=1&ved=0CBMQ8gEwAA
B, click the 'link' on the right top of the map, you will see
'Paste link in email or IM' and
'Paste HTML to embed in website'

Copy the code in 'Paste HTML to embed in website'.
You will find 'll=37.805672,-122.413083', they are longitude and latitude of the address


View Larger Map



3, add these code into your html page head part.
Go to the page http://northbeachhealth.com/contact.php
right click the page and get source code from line 8 - line 40

  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAwRhSY6F_2jelV6V3hr36IRQXzaJo3hs4ignG9MPTCEQrUyb-4RTCJR_RLSFtILRbBVU3WW33j5ikTw"
  type="text/javascript"></script>
 

    <script type="text/javascript">
    function createMarker(point,html,what)
    {
        var marker = new GMarker(point,{id:what, name:"chemmol", description:"chemalog"});
        GEvent.addListener(marker, "click", function()
        {
          marker.openInfoWindowHtml(html);
        });
        return marker;
    }
     
    function initialize()
    {
      if (GBrowserIsCompatible())
      {
            var map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(37.805672,-122.413083), 16);
           
            var bz_point = new GLatLng(37.805672,-122.413083);
            var marker = createMarker(bz_point,'<div style="width:240px">BinZhi Acupuncture Clinic  <p>',"this")
            map.addOverlay(marker);     
       
            map.openInfoWindow(map.getCenter(), document.createTextNode("BinZhi Acupuncture Clinic"));
            map.setUIToDefault();
           
        }
    }

    </script>

4, in your html page body
copy
 <div id="map_canvas" style="width: 400px; height: 500px"></div>

No comments:

Post a Comment