google maps website integration

Hi Experts,

I'm working on a site and the client would like to keep thier static image of a map.  But they would also like to include a google map showing the hotel locations etc in the area.  I was thinking of using ajax to show a google map of the same size with the hotel locations etc when the user hovers over the static image.

How can this be done?  Or do you have other suggestion about how to do this without showing the google map by default.  A button & pop up maybe?

Here is the static image of the map.

Thanks!
HNM sample6
HelpNearMeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
Frosty555Commented:
You can embed static maps into your application using the code that is documented here:

http://code.google.com/apis/maps/documentation/staticmaps/

This will allow you to define the address / features of the map, and google generates the map image for you on the fly. You can put it into an <img> tag to show the map.

Other methods of embedding a google map into your website is shown here:

http://code.google.com/apis/maps/index.html

If you want a link that just links to a google map, you can generate those by going to maps.google.com, searching for the area you want to map out, and then click the "Link" button in the corner which will give you the URL yo ucan use to access that map again.

If your client insists on using their map - which personally I think is really ugly and shows very little useful information - then just put a link underneath it that reads "View this in Google Maps" or something similar, or make clicking on the image itself link to google.
0
 
HelpNearMeAuthor Commented:
Frosty555,

I agree that the map is kind of lame.  And my thoughts are to as you mentioned.. keep the map image and place a button or link to deploy a popup or other in page transition to the google map.  Thats what I need help with.. the elegant way to nest the google map as a pop up or hover triggered image with in the page.

Thanks,

HNM
0
 
aciuicaCommented:
I put there a sample script which show a google map instead of the image on mouse over.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript">
  var loaded = false;
  function initialize() {
    var myLatlng = new google.maps.LatLng(21.1589640, -86.8459370);
    var myOptions = {
      zoom: 10,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
  
  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
  }
  
  function showMap() {	  
	  document.getElementById("map_image").style.display = "none";
	  document.getElementById("map_canvas").style.display = "block";
	  if(!loaded) {
		  loadScript();
		  loaded = true;
	  }
  }
  
  function showImage() {
	  document.getElementById("map_canvas").style.display = "none";
      document.getElementById("map_image").style.display = "block";	  
  }
    
</script>
</head>
<body>
  <div onmouseover="showMap()" onmouseout="showImage()" style="width: 600px; height: 380px;">
  <div id="map_image" style="cursor: pointer; width: 600px; height: 380px; display:block;"><img src="sample6.gif"/></div>
  <div id="map_canvas" style="width: 600px; height: 380px; display:none;"></div>
  </div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
HelpNearMeAuthor Commented:
this is great I'll try it in the morning!

HNM
0
 
HelpNearMeAuthor Commented:
aciuica:

This works great thank you!  I'm posting a new quesiton about this asking how to use a custom map from 'my maps' in this.  Feel free to reply to that new question too

HNM
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.