scottfontenot
9/3/2017 - 2:50 PM

EJ Index-map marker/location created by fontenot_scott - https://repl.it/KdB4/54

EJ Index-map marker/location created by fontenot_scott - https://repl.it/KdB4/54

index.js
content_copyfile_download

function initMap() {
  
  var markers = [];
   map = new google.maps.Map(document.getElementById('google_map'), {
    center: {lat: 35.8688, lng: -95.2195},
    zoom: 4,
    mapTypeId: 'roadmap'
  });
  
 //add click event to get latitude and longitude
  map.addListener('click', function(e) {
    
    //remove previous marker and add new one
        removeMarker(null, markers);
        var latitude = e.latLng.lat();
        var longitude = e.latLng.lng();
        console.log('Latitude : '+latitude+' Longitude: '+longitude);
        var marker = addMarker(map, {lat:latitude, lng:longitude});
    //now to push the marker in markers array in order to remove them
        markers.push(marker);
  });//end of click listener
   
}//end of initMap(called in API script)

   //to remove markers
   function removeMarker(map, markers) {
     for(var i=0; i<markers.length;i++) {
       markers[i].setMap(map);
     }
   }
   
   //now add marker when user clicks and add array having Lat/Lng
  function addMarker(map, center) {
    return new google.maps.Marker({
    position: center,
    map: map
    });
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
	crossorigin="anonymous"></script>
    <link href="index.css" rel="stylesheet" type="text/css"/>
  </head>
  
  <body>
    <div id='landingpage'></div>
    <h1>placeholder text</h1>
    <p> Place holder text</p>
  <div class = "container">
    <div id="google_map"></div>
  </div>  

  
  
  
    
    <script async defer src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing,places&key=AIzaSyB0X30N1AirWkhbX621NrfQ5TDYa7kYLt4&v=3&callback=initMap"></script>
    <script src="index.js"></script>
  </body>
</html>
index.css
content_copyfile_download
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#google_map {
  height: 400px;
  width: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}
#target {
  width: 345px;
}
1-gmap-with-location-marker.md
content_copyfile_download
  • Rendered
  • Source

empty