Solved

Google static maps

Posted on 2013-06-27
19
539 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
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
 
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
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.

 

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

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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 …
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…
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).

912 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

17 Experts available now in Live!

Get 1:1 Help Now