Solved

Google maps

Posted on 2013-06-21
5
255 Views
Last Modified: 2013-06-24
hi,


i am trying to make an iframe in a wordpress page to go to a larger view of the map when you click on it



currently when you click the map it goes to the point where you click so we want to change that and just make it open in a new window to a larger map.

is there a way to do it ?


i attached a screen shot so you can see the map

also the iframe code below

Thank You in advanced

 
    <div class="map"><iframe width="190"
        height="190" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"         src="https://maps.google.com/maps?oe=utf-8&amp;client=firefox-a&amp;   q=6230+E.+Speedway+Blvd.++Tucson,+AZ+85712&amp;ie
=UTF8&amp;hq=&amp;hnear=6230+E+Speedway+Blvd,+Tucson,+Arizona+85710&amp;gl=us&amp;t=m&amp;ll=32.236036,-110.859604&amp;spn=0.01452,0.01708&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe></div>

Open in new window



sorry the code doesnt stay on one page. You have to scroll
Screen-Shot-2013-06-21-at-4.29.2.png
0
Comment
Question by:TimSweet220
  • 2
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39268109
The map is being delivered from another domain (Google).  Therefore you cannot doing any scripting against it because cross-domain scripting is a security violation that is blocked by all browsers.

You will need to spend some time exploring the Google map API to see if there is a way to do what you want either by modifying the options on the page link to Google to include the desired behavior, or to bring it directly into the main page where you may be able to script what you need.

Cd&
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39268397
Is there a way to do it?
Of course there is but an iframe is not the way to go. Just use a modal pop up. Here's a working example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Small Map, Big Map Modal Pop Up</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&v=3&libraries=geometry" type="text/javascript"></script>
<script type="text/javascript">
var marker, infowindow, map;
    $(document).ready(function(){        
        $("#smallMap").click(function(){
            if(!map){initialize();}
	        $("#screen").css("display", "block");
	        $("#result").css("display", "block");
	        $("#result").animate({"width":"912px", "height":"500px", "top":"10px", "left":"0"},'slow');
	    });
	    $("#close_map").click(function(){
	        $("#screen").css("display", "none");
	        $("#result").animate({"width":"10px", "height":"10px", "top":"400px", "left":"180px"},'slow', function(){
	            $("#result").css({"display":"none"});
	        });
	    }); 
    });
    var bounce = 3000;
    function initialize() {
        var ccLoc = new google.maps.LatLng(40.620570, -74.764724);
        var ccOptions = {
            zoom: 16,
            center: ccLoc,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), ccOptions);
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(40.620570, -74.764924),
            title:"Title Here"
        });
        
        var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h3 id="firstHeading" style="color:Teal">Baldinos Lock and Key</h3>'+
            '<div id="bodyContent">'+
            '<p>Store Location</p>'+
            '<p><img src="http://baldinosafes.com/virginia/Vienna_Virginia/Locksmith_Vienna_Storefront_Location_336_West_Maple_Avenue_Vienna_VA_22180.jpg" alt="" style="border:none" /></p>'+
            '</div>'+
            '</div>';

        infowindow = new google.maps.InfoWindow({
            content: contentString,
            position: new google.maps.LatLng(40.520570, -74.764924)
        });
        google.maps.event.addListener(map, 'zoom_changed', function() {
            setLabel(map.getZoom());
        });
        google.maps.event.addListener(marker, 'click', toggleBounce);
        marker.setMap(map);                
        toggleBounce();
    }
    function toggleBounce() {
        if (marker.getAnimation() != null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
            setTimeout(function(){
                marker.setAnimation(null);
            }, bounce);            
            if(bounce == 1400){infowindow.open(map,marker);map.panTo(new google.maps.LatLng(40.623395,-74.764431));}
            bounce = 1400;
        }
    }
   

</script>
<style type="text/css">
* {margin:0 auto;padding:0}
.screen
{
    position:fixed;
    top:0px;
    left:0px;
    display:none;
    width:100%;
    height:100%;
    background-color: #333; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    opacity: 0.5;
    z-index:200;
    display:none
}
.rounded-corners {
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  border-radius: 10px; /* CSS3 */
}
#smallMap
{
	width:276px;
	height:258px;	
}
#smallMap:hover
{
	cursor:pointer
}
#result 
{
	background-color:Transparent;
    width:10px;
    height:10px;
    z-index:300;
    display:none;
    position:absolute;
    top:400px;
    left:180px
}
#close_map
{
	float:right;
	color:#fff;
	font-size:1.5em;
	font-family:arial
}
#close_map:hover
{
	cursor:pointer
}
#mapTitle
{
	float:left;
	color:#fff;
	font-size:1.5em;
	width:895px;
	text-align:left
}
.mapDivTitle
{
    background-color:transparent;
    height: 30px;
    width: 912px;
    position:absolute;
    top:0;
    left:0
}
.mapDiv
{
	background-color:#fff;
    height: 500px;
    width: 912px;
    position:absolute;
    top:30px;
    left:0	
}
</style>
</head>

<body>
 <div id="smallMap"><img src="http://www.bolton-flooring.co.uk/images/bolton-flooring-carpeting.jpg" alt="Click for larger map." /></div>
 <div id="screen" class="screen"></div>        
 <div id="result"> 
 	<div class="mapDivTitle">
         <div id="mapTitle">Large Map in Modal Pop Up</div>
         <div id="close_map">X</div>
    </div>
    <div class="mapDiv">                   
         <div id="map_canvas" style="width:912px;height:500px"></div>
    </div>
</div>
</body>
</html>

Open in new window

To get this to work on a WordPress site, you may need a custom page template.
0
 

Author Comment

by:TimSweet220
ID: 39269935
Why not use an I frame . Why is a I frame not the way to go ?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39270038
For the reason @COBOLdinosaur pointed out.

Why NOT use a modal pop up?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39270078
What part of security violation do you not understand.  You cannot do anything without coding on the server side, and you do not have access to the server side.  So perhaps you should send an email to Google to please allow you to modify their code so you can get around built in browser security.

OR... you can spend time going through the AOI to see if there is a way to use if to do what you want

OR...  you can quit wasting your time trying to figure out why a hammer is the wrong tool to paint a wall.

Cd&
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

679 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