0

So I am trying to make a function that can replace the src of the iframe. In the iframe there would be a map with two places. In the html code there are two forms for the place ID-s.

I just cannot get this to work.

Here is the HTML code:

<div id="start">
    <label for="startLocation">Start location ID:</label>
    <input type="text" id="startLocation" name="startLocation" value="" ><br><br>
</div>

<div id="dest">
    <label for="destination">Destination ID:</label>
    <input type="text" id="destination" name="destination" ><br><br>
</div>

<button onclick="changeMap()">Show the map!</button><br><br>

</form>


<iframe id="map" width="600" height="450" frameborder="0" style="border:0" src="" allowfullscreen></iframe>

This would be the function:

function changeMap(){

//place IDs to put into url
var start = document.getElementById('startLocation').value;

var dest = document.getElementById('destination').value;


//pieces of the url
var mapSource1 = "https://www.google.com/maps/embed/v1/directions?origin=place_id:";

var mapSource2 = "&destination=place_id:";

var mapSource3 = "&key=AIzaSyDMtNzjQdNk-FX1hz7IWVcNiby1B8xiZeg";

var mapSource = mapSource1+start+mapSource2+dest+mapSource3;

//iframe
var iframe = document.getElementById('map');

//changing the src of the iframe
iframe.src = mapSource;


}

1 Answer 1

0

The line

<button onclick="changeMap()">Show the map!</button><br><br>

may be causing the problem.

To begin with, button elements, if not given a type="button", are considered submit buttons. So every time the button is pressed, the form gets submitted and the browser starts loading a different page before the JavaScript has time to do much.

Secondly, I see you are using onclick to attach the event handler. If your script has to be above the form in your HTML, this will result in changeMap being undefined. I would suggest attaching the event handler with JavaScript, something like this:

<button type="button" id="show-map">Show the map!</button><br><br>
var btn = document.getElementById('show-map');
btn.addEventListener('click', changeMap);

Note that because the this is selecting the button element right here, either the script tag must be placed below the button (so the button is around--can't select nothing!) or the JavaScript needs to be placed in a document.onReady function, so that the script won't fire until the page finishes loading (which means the button will be fully loaded).

Unless you're using document.onReady, the order of the script tag and button really matter. If the script references the button, the button comes first. If the button references the script, the script must come first.

Wrapping in some sort of document.onReady is common practice. jQuery has a function ($.ready) that can be used to do this, but if you're brave you can also do it without jQuery.

Also, keep in mind addEventListener doesn't work on older IE. You could polyfill it or use jQuery.

2
  • wow, thanks! actually I've just started with javascript and html, so I had no idea about these things..:) You wrote that the script shouldn't be below the form, but if the javascript is in an external file, how can that even happen? Or is it better to place the script in the HTML? Thankyou!
    – Ilka
    Feb 26, 2016 at 9:35
  • @Ilka Pardon my earlier, self-contradictory comment. I just deleted it. Yes, if you use onclick to set event handlers, your script tag must come first. It doesn't matter if it's just referencing an external file or not. Simply move the tag above the button. Note that onclick isn't really recommended, even though you can do it. It is considered Good Practice to use document.onReady and addEventListener. PS: Keep in mind onclick and document.onReady cannot be used together. Feb 26, 2016 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.