Web Development Blog

by Ei Sabai Nyo

27 Apr, 2009

Code to embed Google Map and Street View    

You will need to sign up for the Google Maps API key and replace “INSERT_API_KEY_HERE” with your 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=iso-8859-1" />
<title>Google Map and Street View</title>

<script src="http://maps.google.com/maps?file=api&v=2&key=INSERT_API_KEY_HERE" type="text/javascript"></script>

<script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
		var lat = -33.867141;
		var lng = 151.207114;
	  
        var map = new GMap2(document.getElementById("map"));
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(lat,lng), 15);
		
		var infoTabs = [
  		new GInfoWindowTab("Address", "Sydney<br /> NSW, Australia"),
		];

		// Place a marker in the center of the map and open the info window
		var marker = new GMarker(map.getCenter());
		GEvent.addListener(marker, "click", function() {
  		marker.openInfoWindowTabsHtml(infoTabs);
		});
		map.addOverlay(marker);
		marker.openInfoWindowTabsHtml(infoTabs);

		var point = new GLatLng(lat,lng);
		panoramaOptions = { latlng:point };
		pano = new GStreetviewPanorama(document.getElementById("streetview"), panoramaOptions);
		GEvent.addListener(pano);

	}
    }

	
    //]]>
</script>	
	
</head>
<body onload="load()" onunload="GUnload()">

<h3>Google Map</h3>
<div id="map" style="width: 500px; height: 400px"></div>
<h3>Street View</h3>
<div id="streetview" style="width: 500px; height: 400px"></div>

</body>
</html>

Books on Google Maps

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

22 Responses to “Code to embed Google Map and Street View”

  1. fl3x7 says:

    this is awesome. Thank you so much!! Exactly what i needed.

    Would it be possible to import the lat and long values from an sql database?

    This is my first time using the google api and i only know basic php so any help would be really appreciated :D

    again thanks for the code :D

    fl3x7

  2. eisabai says:

    Yes, you can get the values from the sql database and assign the values to javascript variables dynamically. For example, if you are using php:

    <?php
    // get lat and lng values from the database and assign them to $lat and $lng
    ?>



    function load() {
    if (GBrowserIsCompatible()) {
    var lat = <?php echo $lat;?>
    var lng = <?php echo $lng;?>

  3. fl3x7 says:

    Thank you for your quick response!

    This is amazing. i will try this tonight. Hope it works.

    Again thank you so much!!! :)

  4. fl3x7 says:

    Hello again :D

    i tried the echo thing but for some reason nothing shows up, no google map or street view :(

    var geocoder = null;
    function load() {
    if (GBrowserIsCompatible()) {
    var lat =
    var lng =

    The variable scope reaches there i think as i echo just above the script and its fine.

    Not sure what to do now :( … really like this version of map and street view as you only have to put long and lat in once as well.

    hope you can help. If you need more please info please let me know. It would be even more amazing if i could email you my code :)

    My email address is what ive submitted with this post :)

    thank you for your help, greatly appreciated :D

  5. eisabai says:

    Hi fl3x7,
    You can email me at eisabainyo at yahoo.com and I will have a look at your code for you.

  6. fl3x7 says:

    in case any one is having trouble getting the php to echo proeprly try adding () are round each echo. eg:

    var lat =() instead of just:
    var lat =

    hope this helps someone :)

    fl3x7

  7. Ariel says:

    there’s something problem when i change the lat and long it will never run. Anyone can help.. tnx

  8. Swathi says:

    I have embedded the Google Map in my site but I dont know how to locate my Factory’s Location.Can you please help me in including the address of my Factory.

  9. eisabai says:

    You can get geocode for your address via this URL.

    http://maps.google.com/maps/geo?key=API_KEY_HERE&q=YOUR_ADDRESS_HERE&output=xml

    View the source of the page and look for <coordinates> tag.

  10. grant says:

    Thanks for your sharing of good tips.
    If I click the marker, there is script error and no street view. I am testing it with asp.net. Is there anything I need to make sure?
    Thanks.

  11. Neerav says:

    hello Thankx for sharing this awesome stuff man….cheers..!!!
    nd ya i want to find a place by giving postal code nd place around it

  12. Rafi Akbar says:

    I have always used Google maps and I would like to know how to improve the directions on the layout, I am looking for a buddy for improve my skills. Street view is cool and I want to add this with a scallable size image too

    Do email me back

    rafiul_akbar@hotmail.com

  13. James says:

    Hi,

    This is a very good stuff. Just wondering how I can change/replace the lat and long with a location/street address from a database.

  14. eisabai says:

    If you have street addresses but no geocodes in your database table, the ideal solution is to add new columns to your table for lat, long values. There are quite a few online tools that let you geocode addresses in batch. Google for “batch geocoder” or similar.

  15. James says:

    Thanks for the reply.

    Just to ensure that I clearly understood ur explanation.

    I have created a field called lat and long in my database. My problem now is “how do i get the data in the address field to populate the ‘geocode systems’ and result from geocode to populate the lat and long field in database, so that the above scrips can use them?

    I have a feeling i javascript can do this but have no idea how to go about it.

    Will appreciate comment if i’m on the right direction and how to moveforward or if there is a better way to do this.

    Many thanks.

    James.

  16. anil singh says:

    Hi I am a school principal and have keen interest java programming and google maps.

    I’ve been using this code and have been unable to change the image in the sample code you provided.

    i have a search and submit button, i would like to have users req an area and see the google street view and map as in your sample code.

    i have read about flash and have been looking at similar sites

  17. anil singh says:

    I’ve used your sample code on a new html page and it shows the sample image maps.

    However on my website http://www.durban24.com it does not show? I have spent many hours and have not been unsuccessful.

    When I did get the maps to show I could not change them.

    Can you look at my site and advise, Please.

    I am a school principal and am learning basic java programming

  18. Luke says:

    I set this up to work with a url variable for long.lat and it works fine but how can i set the direction and angle?

  19. murali says:

    it is working fne. but some times for example there is no available of streetview i want to display ” streetview not available” message. how to get this message. please help me

  20. murali says:

    i am using IE8. streetview not working in IE8. anybody tell me how to solve this problem. all browsers suporting except IE.

  21. murali says:

    check this address in google streetmap “1817 Decatur St
    Houston , TX 77007″. different. click “N” to change the direction then displaying correct place. how to solve this issue.

  22. anil singh says:

    Having returned after a few months of intense research for my MA degree. I have found that my http://www.durban24.com website does have a fair degree of functionality.

    One has to drag the yellow stick man on the google map and the accompanying streetview ( pano style images ) are displayed.

    My problem is as follows:- How do I get a user to type an address of his place of interest which will subsequently present him with the streetview ( if available ) and the ordinary google road map.

    There are some solutions on the net, I do not want to use sources with adverts. can anyone assist me.

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories