Mixing
Position input field outside canvas in Google Map API
I am trying to use Google Map API for web.
The example of "Place Autocomplete" is what I need and it serves me well.
But I need that search field (input field) to be placed outside the map canvas.
Can any one help me with this?
javascript google-maps
edited Nov 20 '13 at 8:53
lonesomeday
182k44274296
asked Nov 20 '13 at 8:51
Mian.AmmarMian.Ammar
3061215
add a comment |
I am trying to use Google Map API for web.
The example of "Place Autocomplete" is what I need and it serves me well.
But I need that search field (input field) to be placed outside the map canvas.
Can any one help me with this?
javascript google-maps
edited Nov 20 '13 at 8:53
lonesomeday
182k44274296
asked Nov 20 '13 at 8:51
Mian.AmmarMian.Ammar
3061215
add a comment |
I am trying to use Google Map API for web.
The example of "Place Autocomplete" is what I need and it serves me well.
But I need that search field (input field) to be placed outside the map canvas.
Can any one help me with this?
javascript google-maps
edited Nov 20 '13 at 8:53
lonesomeday
182k44274296
asked Nov 20 '13 at 8:51
Mian.AmmarMian.Ammar
3061215
I am trying to use Google Map API for web.
The example of "Place Autocomplete" is what I need and it serves me well.
But I need that search field (input field) to be placed outside the map canvas.
Can any one help me with this?
javascript google-maps
javascript google-maps
edited Nov 20 '13 at 8:53
lonesomeday
182k44274296
asked Nov 20 '13 at 8:51
Mian.AmmarMian.Ammar
3061215
edited Nov 20 '13 at 8:53
lonesomeday
182k44274296
asked Nov 20 '13 at 8:51
Mian.AmmarMian.Ammar
3061215
edited Nov 20 '13 at 8:53
lonesomeday
182k44274296
edited Nov 20 '13 at 8:53
lonesomeday
182k44274296
edited Nov 20 '13 at 8:53
lonesomeday
182k44274296
182k44274296
asked Nov 20 '13 at 8:51
Mian.AmmarMian.Ammar
3061215
asked Nov 20 '13 at 8:51
Mian.AmmarMian.Ammar
3061215
asked Nov 20 '13 at 8:51
Mian.AmmarMian.Ammar
3061215
3061215
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
I didn't saw these lines:
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
Removed these and was able to place where i want them to be.
answered Nov 22 '13 at 7:48
Mian.AmmarMian.Ammar
3061215
add a comment |
Yes possible, by overriding the CSS of the search text fields. On inspecting I found by overriding the class .controls you can place it wherever you need.
answered Nov 20 '13 at 8:56
PraveenPraveen
40.8k23106137
I tried but its not working. when given new margins it diapers
– Mian.Ammar
Nov 20 '13 at 9:01
add a comment |
Removing map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(input); will allow you to place your input field outside of map area.
answered Nov 20 '18 at 2:39
Jimba TamangJimba Tamang
734915
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%2f20091207%2fposition-input-field-outside-canvas-in-google-map-api%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
I didn't saw these lines:
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
Removed these and was able to place where i want them to be.
answered Nov 22 '13 at 7:48
Mian.AmmarMian.Ammar
3061215
add a comment |
I didn't saw these lines:
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
Removed these and was able to place where i want them to be.
answered Nov 22 '13 at 7:48
Mian.AmmarMian.Ammar
3061215
add a comment |
I didn't saw these lines:
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
Removed these and was able to place where i want them to be.
answered Nov 22 '13 at 7:48
Mian.AmmarMian.Ammar
3061215
I didn't saw these lines:
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
Removed these and was able to place where i want them to be.
answered Nov 22 '13 at 7:48
Mian.AmmarMian.Ammar
3061215
answered Nov 22 '13 at 7:48
Mian.AmmarMian.Ammar
3061215
answered Nov 22 '13 at 7:48
Mian.AmmarMian.Ammar
3061215
answered Nov 22 '13 at 7:48
Mian.AmmarMian.Ammar
3061215
3061215
add a comment |
add a comment |
Yes possible, by overriding the CSS of the search text fields. On inspecting I found by overriding the class .controls you can place it wherever you need.
answered Nov 20 '13 at 8:56
PraveenPraveen
40.8k23106137
I tried but its not working. when given new margins it diapers
– Mian.Ammar
Nov 20 '13 at 9:01
add a comment |
Yes possible, by overriding the CSS of the search text fields. On inspecting I found by overriding the class .controls you can place it wherever you need.
answered Nov 20 '13 at 8:56
PraveenPraveen
40.8k23106137
I tried but its not working. when given new margins it diapers
– Mian.Ammar
Nov 20 '13 at 9:01
add a comment |
Yes possible, by overriding the CSS of the search text fields. On inspecting I found by overriding the class .controls you can place it wherever you need.
answered Nov 20 '13 at 8:56
PraveenPraveen
40.8k23106137
Yes possible, by overriding the CSS of the search text fields. On inspecting I found by overriding the class .controls you can place it wherever you need.
answered Nov 20 '13 at 8:56
PraveenPraveen
40.8k23106137
answered Nov 20 '13 at 8:56
PraveenPraveen
40.8k23106137
answered Nov 20 '13 at 8:56
PraveenPraveen
40.8k23106137
answered Nov 20 '13 at 8:56
PraveenPraveen
40.8k23106137
40.8k23106137
I tried but its not working. when given new margins it diapers
– Mian.Ammar
Nov 20 '13 at 9:01
add a comment |
I tried but its not working. when given new margins it diapers
– Mian.Ammar
Nov 20 '13 at 9:01
I tried but its not working. when given new margins it diapers
– Mian.Ammar
Nov 20 '13 at 9:01
I tried but its not working. when given new margins it diapers
– Mian.Ammar
Nov 20 '13 at 9:01
add a comment |
Removing map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(input); will allow you to place your input field outside of map area.
answered Nov 20 '18 at 2:39
Jimba TamangJimba Tamang
734915
add a comment |
Removing map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(input); will allow you to place your input field outside of map area.
answered Nov 20 '18 at 2:39
Jimba TamangJimba Tamang
734915
add a comment |
Removing map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(input); will allow you to place your input field outside of map area.
answered Nov 20 '18 at 2:39
Jimba TamangJimba Tamang
734915
Removing map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(input); will allow you to place your input field outside of map area.
answered Nov 20 '18 at 2:39
Jimba TamangJimba Tamang
734915
answered Nov 20 '18 at 2:39
Jimba TamangJimba Tamang
734915
answered Nov 20 '18 at 2:39
Jimba TamangJimba Tamang
734915
answered Nov 20 '18 at 2:39
Jimba TamangJimba Tamang
734915
734915
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%2f20091207%2fposition-input-field-outside-canvas-in-google-map-api%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
