Solved

Google Maps API

Posted on 2011-02-21
6
431 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
  • 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 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