Solved

Google Maps API

Posted on 2011-02-21
6
434 Views
Last Modified: 2012-05-11
Hi Experts,

I'm using the attached code to show a google map when the user hovers over an image.  The code works great but the map needs to show hotel locations.  I made a map in google 'my maps' with a few hotel locations.  How can I make this code display a custom map in google 'my maps'?

Thanks,

HNM
<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
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
  • 3
6 Comments
 
LVL 5

Expert Comment

by:aciuica
ID: 34945701
You have a "Link" link on the top-right corner of your map. You can copy that html from "Paste HTML to embed in website" and replace the iframe stuff from next page.
You can also customize the dimension of iframe and show or not the link with the large map.

<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">
  function showMap() {	  
	  document.getElementById("map_image").style.display = "none";
	  document.getElementById("map_canvas").style.display = "block";
  }
  
  function showImage() {
	  document.getElementById("map_canvas").style.display = "none";
      document.getElementById("map_image").style.display = "block";	  
  }
    
</script>
</head>
<body onLoad="showImage()">
  <div onmouseover="showMap()" onmouseout="showImage()" style="width: 600px; height: 380px;">
    <div id="map_image" style="cursor: pointer; width: 600px; height: 380px; display:none;"><img src="sample6.gif"/></div>
    <div id="map_canvas" style="cursor: pointer; width: 600px; height: 380px; display:block;">
    	<iframe width="600" height="380" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=210368108731107137948.00049ccf76c5931353509&amp;ll=37.0625,-95.677068&amp;spn=47.885545,79.013672&amp;iwloc=00049ccf79f3e3c18f6c7&amp;output=embed"></iframe>
    </div>    
  </div>
</body>
</html>

Open in new window

0
 

Author Comment

by:HelpNearMe
ID: 34945917
aciuica:

Thanks, it worked but when the page loads it shows the google map by default... should show the image by default.  Any ideas?

HNM
0
 
LVL 5

Expert Comment

by:aciuica
ID: 34945941
But the map disappear after is loaded and the image appear. Isn't it like that?
The problem is that if the map is hidden at the beginning it is not loaded ok.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:HelpNearMe
ID: 34946020
Here is a test URL http://www.trendfuel.com/

How can I make the image be displayed by default and the map when someone hovers over it?

thanks!

HNM
0
 
LVL 5

Accepted Solution

by:
aciuica earned 500 total points
ID: 34946061
You forgot the onLoad from body:
<body onLoad="showImage()">
0
 

Author Closing Comment

by:HelpNearMe
ID: 34946103
Excellent thanks!

I'll have one more question so you should watch for that one too :)

HNM
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
Suggested Courses

738 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