?
Solved

google maps website integration

Posted on 2011-02-18
5
Medium Priority
?
330 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 600 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 1400 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses
Course of the Month8 days, 23 hours left to enroll

765 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