Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Google maps

Posted on 2013-06-21
5
Medium Priority
?
265 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 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
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.

972 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