We Keep Coding

Posting Coordinates to Database from Google Maps API

Edit: I solved the problem. Leaving it up in case someone needs something similar in the future.
I am trying to use google map api to get coordinates and save the information in a database. If the user drags the marker then a form is updated with the information. User can also enter the information manually in the form if she wants and the map will be updated with a new marker. Then the user can click submit and the information will be saved in the database.
<form action="{{ route('YOUR_ROUTE') }}" method="post" enctype="multipart/form-data">
<div class="form-group">
<div style="padding-top: 10px;">
<div id="map-location"></div>
</div>
{{-- visibility, lat, lng, location --}}
<input class="form-control" type="text" name="location_name" id="location_name" placeholder="Location">
<input class="form-control" type="text" name="latitude" id="latitude" placeholder="Latitude" style="max-width: 50%;">
<input class="form-control" type="text" name="longitude" id="longitude" placeholder="Longitude" style="max-width: 50%;">
<button type="submit" class="btn btn-primary">Post</button>
<input type="hidden" value="{{ Session::token() }}" name="_token">
</div>
</form>
<script>
//initialise and add the map
function initMap(){
// location of midtown manhattan
var midtown = {lat: 40.7549, lng: -73.9840};
// the maps centered at midtown
var map = new google.maps.Map(document.getElementById('map-location'),{zoom:17, center:midtown});
// the marker
var marker = new google.maps.Marker({position: midtown, map: map, draggable: true});
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
};
marker.setPosition(pos);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
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);
}
// dragged event of the marker
google.maps.event.addListener(marker, 'dragend', function(){
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
var address;
$('#latitude').val(lat);
$('#longitude').val(lng);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({latLng: marker.getPosition()}, function(result,status){
if(status == google.maps.GeocoderStatus.OK){
address = result[0].formatted_address;
// console.log(address);
$('#location_name').val(address);
}
else{
console.log('Geocode was not successful for the following reason: ' + status);
}
});
});
// when the place is changed in the location box the map updates
searchBox = new google.maps.places.SearchBox(document.querySelector( '#location_name' ));
google.maps.event.addListener(searchBox, 'places_changed', function(){
var places = searchBox.getPlaces(),
bounds = new google.maps.LatLngBounds();
for(var i = 0; place = places[i]; i++){
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(15);
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
$('#latitude').val(lat);
$('#longitude').val(lng);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMap"></script>

I updated my first post with the code that is working for me.
I couldn't update the map with the information from the form because I didn't include the places library while loading the Maps JavaScript API.
I couldn't see the updated coordinates after dragging the map marker because I didn't enable the geocoding api and didn't create a billing account with google cloud. I also restricted my API key.
Hope this helps.

Repeatition of map div in ng repeat

I have a card where it is repeated multiple times in a page, In the card I have a google map which shows the location of a particular point.
I am getting the google side response as
Error
at new nc (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:47:499)
at Object._.oc (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:48:96)
at ah (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:98:420)
at https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:137:53
at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:21:5)
at https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:136:20
at https://maps.googleapis.com/maps/api/js?key=AIzaSyCEHWgPqgJiWcySMQPZZ7W7Cjpugl928Fw&callback=renderMap:137:68
Html code is as follows
<div class="body" ng-repeat="hospital in hospitals">
<div class="list card">
<div>
<div id="map{{$index}}" style="height:200px;width:100%;" class="renderMap(hospital)"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=renderMap">
</script>
</div>
</div>
</div>
In controller, it is as follows
$scope.renderMap = renderMap;
function renderMap(hospital){
$scope.details_for_map = hospital;
console.log($scope.details_for_map);
initMap();
}
function initMap() {
var latlng = new google.maps.LatLng( $scope.details_for_map.geometry.location.lat, $scope.details_for_map.geometry.location.lng);
var map = new google.maps.Map(document.getElementById('map'+$scope.details_for_map.index), {
zoom: 4,
center: latlng
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Hello World!'
});
}
As I am new to ionic and angular js I am not able to figure out what I am doing incorrectly. Please let me know what I can do about it.

creating a google map that is connected to database

I am trying to create a google map. the latitude and the longitude are from the database so I had to put those in a textbox then get its value in the script. I tried doing so but it doesn't work will you help me with this one; here's my JavaScript:
function initMap() {
var lat = document.getElementById('lat');
var lang = document.getElementById('lang');
var uluru = {lat: lat, lng: lang };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
Here's the html:
<input type="text" style="display: none" id="lat" value="7.8383054" />
<input type="text" style="display: none" id="lang" value="123.2966657" />
<div id="map" ">
</div>
JSfiddle

the "numbers" in the text fields are access using the .value property:
the lat/lng in a google.maps.LatLngLiteral must be numbers. (without the parseFloat the API throws these errors:
InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);
You need to actually call the initMap method (your fiddle isn't doing this)
updated fiddle
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<input type="text" id="lat" value="7.8383054" />
<input type="text" id="lang" value="123.2966657" />
<div id="map" ">
</div>
<script>
function initMap() {
var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);
var uluru = {lat: lat, lng: lang };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>

Try:
var lat = document.getElementById('lat').value;
var lang = document.getElementById('lang').value;

Not really sure where your problem lies aside from not actually using the value of the text inputs or calling the function that returns those values but perhaps something long these lines might help get you started. If you are needing the user to enter different lat/lng coordinates then you would also need an event handler assigned to listen for changes or a button to submit the new coordinates.
<?php
/*
*/
?>
<!doctype html>
<html>
<head>
<title>Google maps</title>
<script src='https://www.google.com/jsapi' charset='utf-8'></script>
<script src='https://maps.google.co.uk/maps/api/js?key=APIKEY' charset='utf-8'></script>
<script type='text/javascript' charset='utf-8'>
function initMap() {
var uluru = {
lat: document.getElementById('lat').value,
lng: document.getElementById('lang').value
};
var options={
zoom: 4,
center: uluru
};
var map = new google.maps.Map( document.getElementById('map'), options );
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
document.addEventListener( 'DOMContentLoaded', initMap, false );
</script>
<style type='text/css' charset='utf-8'></style>
</head>
<body>
<div id='map'></div>
<div>
<input type='text' id='lat' value='7.8383054' />
<input type='text' id='lang' value='123.2966657' />
</div>
</body>
</html>

call initMap() function in body tag. it will load the map, the most important thing do you have api key ? you also need ssl to use google maps. means your url must be https://yourdomain.com
body onload="initMap()"

Pass MSSQL table values to javascript

I'm trying to make a website with asp.net mvc 4 & EF6 where I want to pass values from MSSQL table to javascript. So far everything is working fine except if I pass Latitude & Longitude values for google-map-api function, map doesn't show up in my view. I used Html.HiddenFor helper to pass the value from <span>. Here are my codes,
Controller
public ActionResult BranchDetails(int BrId)
{
Branch branchDetails = abdb.Branches.Find(BrId);
return View(branchDetails);
}
View
<script>
function initialize() {
var marker;
var LatTag = document.getElementById("Lat");
var Lat = LatTag.getElementsByTagName("span");
var LngTag = document.getElementById("Lng");
var Lng = LngTag.getElementsByTagName("span");
var mapProp = {
center: new google.maps.LatLng(LatTag, LngTag),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat, Lng),
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div class="container well" style="min-width: 100%; padding-right: 5px;">
<div id="googleMap"></div>
<span id="Lat">#Html.HiddenFor(model => model.Latitude)</span>
<span id="Lng">#Html.HiddenFor(model => model.Longitude)</span>
<h4><b>#Html.DisplayFor(model => model.Title)</b></h4>
<p><strong>Address:</strong> #Html.DisplayFor(model => model.Address)</p>
<p><strong>Contact No. :</strong> #Html.DisplayFor(model => model.ContactNo)</p>
<p><strong>Contact Person(s):</strong> #Html.DisplayFor(model => model.ContactPerson)</p>
</div>
</body>
Point to be noted that my Longitude & Latitude fields in MSSQL are set in varchar mode. I'm not sure if its causing the problem but just felt needed to inform. How can I solve this problem? Need this help badly. Tnx.

Nevermind, found my own solution. This worked for me, instead of giving span id, I gave Html.HiddenFor helper the id. For some reason javascript was not picking the id of the span I guess. Here are my codes,
<script>
function initialize() {
var marker;
var Lat = parseFloat(document.getElementById("Lat").value);
var Lng = parseFloat(document.getElementById("Lng").value);
var mapProp = {
center: new google.maps.LatLng(Lat, Lng),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat, Lng),
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="googleMap"></div>
#Html.HiddenFor(model => model.Latitude, new { id = "Lat" })
#Html.HiddenFor(model => model.Longitude, new { id = "Lng" })
</body>

Google Map does not show the map with given langLat

I have the following code to generate a Google Map based on the given latLang , but it does not show any map.
I get the latLang from DB and store it in a hidden input, the using document.getElementById() I get the value and assign it to the map. But it fails? Why?
(34.686298727073016, 50.92648297548294)
Here is the Javascript Code to Generate the map:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=fa"></script>
<div id='map-canvas' style="width: 500px; height: 500px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;">
</div>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(document.getElementById('mapPosition').value);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'منطقه مورد نظر در نقشه'
});
var infowindow = new google.maps.InfoWindow({
content: "<B>نقطه مورد نظر خود را در نقشه کلیک کنید</B>"
});
/*
google.maps.event.addListener(map, 'click', function(event) {
console.log(event);
marker.setPosition(event.latLng);
document.getElementById('mapPosition').value = event.latLng;
map.setCenter(event.latLng);
});*/
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<input type="hidden" value="<?php echo $item[0]['latLang']; ?>" name="mapPosition" id="mapPosition" />

The api takes two arguments e.g.
new google.maps.LatLng(-34.397, 150.644)
and it looks like you are passing it one
new google.maps.LatLng(document.getElementById('mapPosition').value);
I would advise looking here for your problem.
Either parse the value
(34.686298727073016, 50.92648297548294)
into two parameters, or have two inputs- one for long and another for lat.

try to give individual lat long values:
myLatLong = new google.maps.LatLng(lat, long)