Solved

Google static maps

Posted on 2013-06-27
19
557 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
[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
  • 10
  • 9
19 Comments
 
LVL 4

Expert Comment

by:ScorchD
ID: 39283147
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
ID: 39283166
Can you do an example
0
 
LVL 4

Accepted Solution

by:
ScorchD earned 500 total points
ID: 39283176
<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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 4

Expert Comment

by:ScorchD
ID: 39283182
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
ID: 39285026
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
ID: 39285142
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
ID: 39285372
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
ID: 39285412
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
ID: 39285542
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
 

Author Comment

by:TimSweet220
ID: 39285577
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
ID: 39285586
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
ID: 39285589
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
ID: 39285605
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
ID: 39285617
The map.html i cannot see it .
It is not attached
0
 
LVL 4

Expert Comment

by:ScorchD
ID: 39285635
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
ID: 39286262
I do need to embed it in an I frame
0
 
LVL 4

Expert Comment

by:ScorchD
ID: 39286313
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
ID: 39286865
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
ID: 39291067
great feedback and answered all my questions and explained everything.
Thank you
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Search Box CSS Question 16 47
WordPress Creating scrolling box at top of page 1 31
modify font on ninja form 1 25
Undefined variable with $_POST in PHP 5 39
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

734 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