Reputation: 891

Jquery - Append shows double quotes in html

I have a html and js file. I'm trying to test the Google maps with javascript. I want to be able to dynamically add positions into the select. For some reason, the # sign is not working. I'm sure it's something easy I'm just missing.

When I use this code...

$('start').append('<option value="foo" selected="selected">Foo</option>');

Why is the output...

"<option value="foo" selected="selected">Foo</option>"

It shows double quotes and doesn't display as HTML.

HTML

<html>
<head> 
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
    <div id="formAdd">
        <h1>Add Site</h1>

        <label for="name">Name:</label>
        <input type="text" id="name"><br>
    </div>
    <br/><br/>
    <div id="floating-panel">
            <b>Start: </b>
            <select id="start">
            </select>
            <b>End: </b>
            <select id="end">
            </select>
    </div>   
    <br/><br/>
    <div id="googleMap" style="width:50%;height:400px;float:left"></div>

    <div id="parent" style="float: left">
        <ul id="list">
        </ul>
    </div>

    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=myMap"></script>
    <script src="map.js"></script>
</body>

Here is my JS file

      var positions = [];
  var names = [];

  var $ = function (id) {
      return document.getElementById(id);
  }

  window.onload = function () { 
      initMap();
  }

  function getCurrentLocation(callback) {
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            callback(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
          });
      }
      else {
          throw new Error("Your browser does not support geolocation.");     
      }
  }  

  function initMap() {

      //Create new map in googleMap div
      map = new google.maps.Map($("googleMap"), {
        zoom: 10
      });

      //Get the current location
      geoLocation(map);

      //Map clicked, create marker
      map.addListener('click', function(e) {
          createMarker(e.latLng, map);

          for (var i = 1; i <= positions.length-1; i++) {
              $("start").append('<option value="(40.23277990064058, -75.04673282753907)">Test</option>');
          }
        });  
  }

  function createMarker(latLng, map) {
      var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          title: $("name").value
      });

      //alert(marker.position);
      positions[positions.length] = marker.position;
      names[names.length] = marker.title;

  }

Upvotes: 0

Answers (3)

JakeofSpades

Reputation: 1012

This code is going to be slightly different than yours because I went and created this from scratch and pieced in the relevant parts of your code. But I hope this helps. My code is now inserting select options for the clicks (when a name is provided in the input field).

  var positions = [];
  var names = [];

var map, infoWindow;
function initMap() {
  map = new google.maps.Map(document.getElementById('googleMap'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  infoWindow = new google.maps.InfoWindow;

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.');
      infoWindow.open(map);
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }

     //Map clicked, create marker
      map.addListener('click', function(e) {
          createMarker(e.latLng, map);

        var start = document.getElementById("start");
        var locationName = document.getElementById("name").value;
        start.options[start.options.length] = new Option(locationName, '40.23277990064058, -75.04673282753907');
        });  
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
  infoWindow.open(map);
}

  function createMarker(latLng, map) {
      var marker = new google.maps.Marker({
          position: latLng,
          map: map,
          title: document.getElementById("name").value
      });

      //alert(marker.position);
      positions[positions.length] = marker.position;
      names[names.length] = marker.title;

  }

Notice I dropped the jquery reference and used vanilla javascript to select elements. This was because the '#' was giving you trouble previously (and the google docs were using vanilla js, so I went that route as well). I hope this helps, but let me know if this doesn't cover what you need.

-Also, I've hardcoded the location data in, you'll probably want to get that back dynamically once you get this working.

Upvotes: 1

indefinite

Reputation: 431

Hello I'm new at this and I'm not entirely sure if this is correct, but maybe you can try this code

$("#start").append("<option value='"+(40.23277990064058, -75.04673282753907)+"'>Test</option>");

I just put # and some quotation mark

Upvotes: 1

Jack Bashford

Reputation: 44145

Firstly, you should use #start for the ID selector. Secondly, it works fine:

$('#start').append('<option value="foo" selected="selected">Foo</option>');

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<select id="start"></select>

Upvotes: 1

Jquery - Append shows double quotes in html

Answers (3)

Related Questions