• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 332
  • Last Modified:

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.

HNM sample6
  • 3
2 Solutions
You can embed static maps into your application using the code that is documented here:


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:


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.
HelpNearMeAuthor Commented:

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.


I put there a sample script which show a google map instead of the image on mouse over.
<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";
  function showMap() {	  
	  document.getElementById("map_image").style.display = "none";
	  document.getElementById("map_canvas").style.display = "block";
	  if(!loaded) {
		  loaded = true;
  function showImage() {
	  document.getElementById("map_canvas").style.display = "none";
      document.getElementById("map_image").style.display = "block";	  
  <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>

Open in new window

HelpNearMeAuthor Commented:
this is great I'll try it in the morning!

HelpNearMeAuthor Commented:

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

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.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now