Solved

Google maps

Posted on 2013-06-21
5
254 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: 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.

Question has a verified solution.

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

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
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…

829 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