Solved

google maps website integration

Posted on 2011-02-18
5
329 Views
Last Modified: 2012-05-11
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
0
Comment
Question by:HelpNearMe
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 31

Assisted Solution

by:Frosty555
Frosty555 earned 150 total points
ID: 34926539
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
 

Author Comment

by:HelpNearMe
ID: 34926666
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
 
LVL 5

Accepted Solution

by:
aciuica earned 350 total points
ID: 34930820
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
 

Author Comment

by:HelpNearMe
ID: 34931095
this is great I'll try it in the morning!

HNM
0
 

Author Comment

by:HelpNearMe
ID: 34945275
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

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Basic understanding on "OO- Object Orientation" is needed for designing a logical solution to solve a problem. Basic OOAD is a prerequisite for a coder to ensure that they follow the basic design of OO. This would help developers to understand the b…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question