Solved

Google static maps

Posted on 2013-06-27
19
538 Views
Last Modified: 2013-07-01
I'm trying to put a static google map on a Wordpress page . I need it to open in a new window . How do I make the static google map open in a new window when you click on the map
0
Comment
Question by:TimSweet220
  • 10
  • 9
19 Comments
 
LVL 4

Expert Comment

by:ScorchD
Comment Utility
You can do this a couple of ways, generally you are either inserting a map or an image, if you simply want an image then just insert the image as you normally would and wrap with an anchor tag such as
<a href="link to google map" target="_blank"><img src="my map image"/></a>

Open in new window

The only important bit here is to set target="_blank" as that instructs the browser to open the link in a new window.
0
 

Author Comment

by:TimSweet220
Comment Utility
Can you do an example
0
 
LVL 4

Accepted Solution

by:
ScorchD earned 500 total points
Comment Utility
<a href="http://goo.gl/maps/fds4e" target="_blank"><img src="http://www.thekip.com/wp-content/uploads/2013/03/Implement-GPS-data-for-your-Google-MAP.gif" /></a>

Open in new window

The image is a random google map and the link is to london bridge but hopefully you get the idea, personaly I would just embed the map in the page, its a much more elegant solution.
0
 
LVL 4

Expert Comment

by:ScorchD
Comment Utility
If you are interested this is how you would embed the map in to your page in to a div with an id of map.
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(54.14966,-4.50113);

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:12,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map=new google.maps.Map(document.getElementById("map"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter
  });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map"></div>

Open in new window

0
 

Author Comment

by:TimSweet220
Comment Utility
also is there a way to make a iframe open in a new window ?

using the iframe code that they gave to copy can you put the target="_blank" to open it in a new window
0
 
LVL 4

Expert Comment

by:ScorchD
Comment Utility
Well an i frame is just that an inline frame, you could create a new page and simply embed the iframe on that to have it open in a new window you can use something like the following.
<a href="#" onClick="MyWindow=window.open('link to page','MyWindow','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,width=600,height=300'); return false;">Click to view map</a>

Open in new window

0
 

Author Comment

by:TimSweet220
Comment Utility
so out of this code below i will just have to add the onclick="myWindow=window.open


       
 <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" [b]onclick="MyWindow=window.open"[/b]></iframe></div><small><a href="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;source=embed" style="color:#0000FF;text-align:left" target="_blank">View Larger Map</a></small> </div>  

Open in new window




i added the onclick="Mywindow=window.open"

to my current  code that i am using  

 I have a link in the bottom of the code that opens in a new window when you click on view larger map

so i added the code for new window when click on the map to open in new window did i add it correctly?
0
 
LVL 4

Expert Comment

by:ScorchD
Comment Utility
If you just want to embed the map as an iframe thats how it will work, you dont need the map div or the link if you want to do it like that just add the embed code to your page like this
<iframe width="600" height="300" 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" [b]onclick="MyWindow=window.open"[/b]></iframe></div><small><a href="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;source=embed" style="color:#0000FF;text-align:left" target="_blank">View Larger Map</a></small>

Open in new window

If you want it to open in a new window by clicking an image or a link as you mentioned in the first place you can with the link I gave you simply pointing to a page with this map on it.
Does that make sense?
0
 

Author Comment

by:TimSweet220
Comment Utility
that makes sense

but the code that you give above and also the code that i have posted doesnt open in the new window when you click on the map. The map just moves to where you clicked on.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:TimSweet220
Comment Utility
if i just add the link in the <a> tag then the map doesnt show
I didnt save an image of the map like you did when you did the first example.


i need the iframe and also the div i added what you said to add in my code but it still doesnt open in new window

i also added and tried it with just the <a> tag like yours and set the width and height to 190 but i didnt have any luck

please help.
0
 
LVL 4

Expert Comment

by:ScorchD
Comment Utility
OK let me show you a working example of what I am talking about
If you have this link on a page, lets say wrapped around a picture of a map so like in my earlier example.
<a href="#" onClick="MyWindow=window.open('map.html','MyWindow','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,width=600,height=300'); return false;"><img src="http://www.thekip.com/wp-content/uploads/2013/03/Implement-GPS-data-for-your-Google-MAP.gif" /></a>

Open in new window

So now you have a link that will open a page in a new pop-out window thanks to the on-click event, the page it opens happens to contain your embedded map, I have attached this file below so you can see. So if you look at the link the first part of that on-click event points to that new page with the map in which it assumes is in the same directory as the current file.
Does that make sense now?
0
 
LVL 4

Expert Comment

by:ScorchD
Comment Utility
I am working on the basis here that for some reason you don't want to embed the map and so you are going to make an image of the map that you want to put on to the page.
0
 

Author Comment

by:TimSweet220
Comment Utility
looks like i need to use an iframe in order to get the map to show in wordpress
i did all your examples and just change the info with my info for map and none of them open in new window when you click on the map. I dont want the map to scroll or move when i click. I want the map to stay still when clicked and also to open in a new window

all the examples do not open in a new window. The only one that does is the one that you set the source link to the file that is saved in the uploads folder


I do not what to save the image to any folder


do you know why it wont open in new window


can you make an example using iframe and div like mine
because the map will not show up only the bottom words that says click to view map does
in my code i added the onlclick tag and also tried it with the target tag and none seemed to work

can you help me adjust my code please?

so for the ignorance about this but i am confused
0
 

Author Comment

by:TimSweet220
Comment Utility
The map.html i cannot see it .
It is not attached
0
 
LVL 4

Expert Comment

by:ScorchD
Comment Utility
OK, if you dont want to embed a map then you are going to have to make an image for the map and put it somewhere, google does not make map images for you, you can either link to the content or embed it either using an iframe or using their API, which is what I showed you at the start, lets not worry about that for now.
So basic link that opens a new page in a new "popout" window, im assuming you want it popout rather than just a new tab? Here is a working example for you.
http://jsfiddle.net/Nt2FB/
Then say you have your page with the map on somewhere within your site that just looks like this.
http://jsfiddle.net/tLd8g/
All you need to do is point the link to this page and your done.
0
 

Author Comment

by:TimSweet220
Comment Utility
I do need to embed it in an I frame
0
 
LVL 4

Expert Comment

by:ScorchD
Comment Utility
What I mean is most people are happy just embedding it on the page in the first place without the link. You want from what I gather to not embed the map but have it so it opens in a new window, well unless you want to link to google maps you have no choice but to embed it yourself somewhere.
Does it not make sense from the emaple I have you above now?
0
 

Author Comment

by:TimSweet220
Comment Utility
Yes it makes since
But I used the example in my code I have provided
I used the I frame and div tag
And it still doesn't open in a new window when clicked
Can you help me with my code that I have provided and not change anything but adding the open in a new window code to it
?

I added the target tag and also the window tag and those two tags do not open it in a new window

Can you modify my existing code please because I think I am doing something wrong
0
 

Author Closing Comment

by:TimSweet220
Comment Utility
great feedback and answered all my questions and explained everything.
Thank you
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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…
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.
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

771 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

8 Experts available now in Live!

Get 1:1 Help Now