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>
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
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;?>
…
Thank you for your quick response!
This is amazing. i will try this tonight. Hope it works.
Again thank you so much!!! :)
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
Hi fl3x7,
You can email me at eisabainyo at yahoo.com and I will have a look at your code for you.
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
there’s something problem when i change the lat and long it will never run. Anyone can help.. tnx
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.
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.
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.
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
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
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.
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.
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.
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
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
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?
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
i am using IE8. streetview not working in IE8. anybody tell me how to solve this problem. all browsers suporting except IE.
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.
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.