?
Solved

Google maps

Posted on 2013-06-21
5
Medium Priority
?
262 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
[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
  • 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 1000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

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 …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

719 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