how to embed google map url to website using html
i have this google map url
I tried to embed using iframe to my website but it's not working
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>please help how to embed
javascript php html css
edited Jan 19 at 7:03
Anil Rana
44
asked Jan 19 at 6:36
David EyeDavid Eye
61
add a comment |
i have this google map url
I tried to embed using iframe to my website but it's not working
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>please help how to embed
javascript php html css
edited Jan 19 at 7:03
Anil Rana
44
asked Jan 19 at 6:36
David EyeDavid Eye
61
add a comment |
i have this google map url
I tried to embed using iframe to my website but it's not working
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>please help how to embed
javascript php html css
edited Jan 19 at 7:03
Anil Rana
44
asked Jan 19 at 6:36
David EyeDavid Eye
61
i have this google map url
I tried to embed using iframe to my website but it's not working
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>please help how to embed
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe> <iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>javascript php html css
javascript php html css
edited Jan 19 at 7:03
Anil Rana
44
asked Jan 19 at 6:36
David EyeDavid Eye
61
edited Jan 19 at 7:03
Anil Rana
44
asked Jan 19 at 6:36
David EyeDavid Eye
61
edited Jan 19 at 7:03
Anil Rana
44
edited Jan 19 at 7:03
Anil Rana
44
edited Jan 19 at 7:03
Anil Rana
44
44
asked Jan 19 at 6:36
David EyeDavid Eye
61
asked Jan 19 at 6:36
David EyeDavid Eye
61
asked Jan 19 at 6:36
David EyeDavid Eye
61
61
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Here is another way of implementing:
<iframe width="100%" height="600" src="https://maps.google.com/maps?width=100%&height=600&hl=en&coord=52.70967533219885, -8.020019531250002&q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland&ie=UTF8&t=&z=14&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br />You have to change the following:
- width= (width of iframe)
- height= (height of iframe)
- coord= (cordinates of the address)
- q= (address)
- z= (zoom level)
Hope this helps
answered Jan 19 at 8:02
SyferSyfer
2,56221123
add a comment |
If you check the console you will find the following error,
Refused to display 'https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Here you can read more about the above error
Now to fix this error change the iframe src a little as followed.
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/embed?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>What we did is we changed dir/ to embed
answered Jan 19 at 9:08
Ussaid IqbalUssaid Iqbal
543514
add a comment |
First, check out how to ask
From the looks of it, I would start on googles developer guide, you need to request an API key. Then try to put that code with the API key put into your html code
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
after that maybe you can dive a little further into detail on what "it's not working" means. Are you getting any output in the console, did it shut your computer off? any further detail would help us help you!
answered Jan 19 at 6:56
Corey GibsonCorey Gibson
7011
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54264689%2fhow-to-embed-google-map-url-to-website-using-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Here is another way of implementing:
<iframe width="100%" height="600" src="https://maps.google.com/maps?width=100%&height=600&hl=en&coord=52.70967533219885, -8.020019531250002&q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland&ie=UTF8&t=&z=14&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br />You have to change the following:
- width= (width of iframe)
- height= (height of iframe)
- coord= (cordinates of the address)
- q= (address)
- z= (zoom level)
Hope this helps
answered Jan 19 at 8:02
SyferSyfer
2,56221123
add a comment |
Here is another way of implementing:
<iframe width="100%" height="600" src="https://maps.google.com/maps?width=100%&height=600&hl=en&coord=52.70967533219885, -8.020019531250002&q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland&ie=UTF8&t=&z=14&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br />You have to change the following:
- width= (width of iframe)
- height= (height of iframe)
- coord= (cordinates of the address)
- q= (address)
- z= (zoom level)
Hope this helps
answered Jan 19 at 8:02
SyferSyfer
2,56221123
add a comment |
Here is another way of implementing:
<iframe width="100%" height="600" src="https://maps.google.com/maps?width=100%&height=600&hl=en&coord=52.70967533219885, -8.020019531250002&q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland&ie=UTF8&t=&z=14&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br />You have to change the following:
- width= (width of iframe)
- height= (height of iframe)
- coord= (cordinates of the address)
- q= (address)
- z= (zoom level)
Hope this helps
answered Jan 19 at 8:02
SyferSyfer
2,56221123
Here is another way of implementing:
<iframe width="100%" height="600" src="https://maps.google.com/maps?width=100%&height=600&hl=en&coord=52.70967533219885, -8.020019531250002&q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland&ie=UTF8&t=&z=14&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br />You have to change the following:
- width= (width of iframe)
- height= (height of iframe)
- coord= (cordinates of the address)
- q= (address)
- z= (zoom level)
Hope this helps
<iframe width="100%" height="600" src="https://maps.google.com/maps?width=100%&height=600&hl=en&coord=52.70967533219885, -8.020019531250002&q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland&ie=UTF8&t=&z=14&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br /><iframe width="100%" height="600" src="https://maps.google.com/maps?width=100%&height=600&hl=en&coord=52.70967533219885, -8.020019531250002&q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland&ie=UTF8&t=&z=14&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br />answered Jan 19 at 8:02
SyferSyfer
2,56221123
answered Jan 19 at 8:02
SyferSyfer
2,56221123
answered Jan 19 at 8:02
SyferSyfer
2,56221123
answered Jan 19 at 8:02
SyferSyfer
2,56221123
2,56221123
add a comment |
add a comment |
If you check the console you will find the following error,
Refused to display 'https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Here you can read more about the above error
Now to fix this error change the iframe src a little as followed.
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/embed?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>What we did is we changed dir/ to embed
answered Jan 19 at 9:08
Ussaid IqbalUssaid Iqbal
543514
add a comment |
If you check the console you will find the following error,
Refused to display 'https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Here you can read more about the above error
Now to fix this error change the iframe src a little as followed.
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/embed?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>What we did is we changed dir/ to embed
answered Jan 19 at 9:08
Ussaid IqbalUssaid Iqbal
543514
add a comment |
If you check the console you will find the following error,
Refused to display 'https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Here you can read more about the above error
Now to fix this error change the iframe src a little as followed.
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/embed?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>What we did is we changed dir/ to embed
answered Jan 19 at 9:08
Ussaid IqbalUssaid Iqbal
543514
If you check the console you will find the following error,
Refused to display 'https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Here you can read more about the above error
Now to fix this error change the iframe src a little as followed.
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/embed?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>What we did is we changed dir/ to embed
<iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/embed?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe><iframe id="iframeid"
width="450"
height="250"
style="border:0"
src="https://www.google.com/maps/embed?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>answered Jan 19 at 9:08
Ussaid IqbalUssaid Iqbal
543514
answered Jan 19 at 9:08
Ussaid IqbalUssaid Iqbal
543514
answered Jan 19 at 9:08
Ussaid IqbalUssaid Iqbal
543514
answered Jan 19 at 9:08
Ussaid IqbalUssaid Iqbal
543514
543514
add a comment |
add a comment |
First, check out how to ask
From the looks of it, I would start on googles developer guide, you need to request an API key. Then try to put that code with the API key put into your html code
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
after that maybe you can dive a little further into detail on what "it's not working" means. Are you getting any output in the console, did it shut your computer off? any further detail would help us help you!
answered Jan 19 at 6:56
Corey GibsonCorey Gibson
7011
add a comment |
First, check out how to ask
From the looks of it, I would start on googles developer guide, you need to request an API key. Then try to put that code with the API key put into your html code
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
after that maybe you can dive a little further into detail on what "it's not working" means. Are you getting any output in the console, did it shut your computer off? any further detail would help us help you!
answered Jan 19 at 6:56
Corey GibsonCorey Gibson
7011
add a comment |
First, check out how to ask
From the looks of it, I would start on googles developer guide, you need to request an API key. Then try to put that code with the API key put into your html code
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
after that maybe you can dive a little further into detail on what "it's not working" means. Are you getting any output in the console, did it shut your computer off? any further detail would help us help you!
answered Jan 19 at 6:56
Corey GibsonCorey Gibson
7011
First, check out how to ask
From the looks of it, I would start on googles developer guide, you need to request an API key. Then try to put that code with the API key put into your html code
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
after that maybe you can dive a little further into detail on what "it's not working" means. Are you getting any output in the console, did it shut your computer off? any further detail would help us help you!
answered Jan 19 at 6:56
Corey GibsonCorey Gibson
7011
answered Jan 19 at 6:56
Corey GibsonCorey Gibson
7011
answered Jan 19 at 6:56
Corey GibsonCorey Gibson
7011
answered Jan 19 at 6:56
Corey GibsonCorey Gibson
7011
7011
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54264689%2fhow-to-embed-google-map-url-to-website-using-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
