Solved

google maps website integration

Posted on 2011-02-18
5
325 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html coding on my Tumblr blog 1 34
eclipse shortcuts 9 45
split string containing \r\n in Java 46 38
I am Updating mysql where id =something ...Not working  Jquery/PHP 4 34
This article discusses four methods for overlaying images in a container on a web page
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 …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.

932 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now