Solved

Google Maps API

Posted on 2011-02-21
6
432 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying 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

Suggested Solutions

Title # Comments Views Activity
Can't get js include to work in html file 8 20
how can I add blockquote after on my wordpress site 3 17
hashmap order 17 36
Selected in an option list 13 18
In this post we will learn how to connect and configure Android Device (Smartphone etc.) with Android Studio. After that we will run a simple Hello World Program.
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 …
This theoretical tutorial explains exceptions, reasons for exceptions, different categories of exception and exception hierarchy.
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…

790 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