Solved

Google maps

Posted on 2013-06-21
5
252 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 40
jQuery Animation faster 5 42
jquery add something to a div 4 37
AngularJS Page Control Understanding 5 38
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
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 video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

914 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now