j789
asked on
Google maps, choose location using pin
Hi, I would like to use google maps api to select a pick-up location in an on-line form I've created. Does anyone know how this can be done? Thanks
ASKER
Hi Ray, I've been through the examples and have a working map on my form. What I'd like to do is drop a pin on the map and database the lat / long coordinates. Do you know of any tutorials or have you come across anything similar?
There's an article here about google mapping.
https://www.experts-exchange.com/articles/3350/Using-the-Google-Maps-API-in-PHP-and-JavaScript.html
I have these two scripts in my teaching library, too. The first is the server-side script that records the geocode (lat,lon pair). In this example, I just write the information into the error_log, but you could put it into the database or another text file pretty easily.
https://www.experts-exchange.com/articles/3350/Using-the-Google-Maps-API-in-PHP-and-JavaScript.html
I have these two scripts in my teaching library, too. The first is the server-side script that records the geocode (lat,lon pair). In this example, I just write the information into the error_log, but you could put it into the database or another text file pretty easily.
<?php // demo/latlon_server.php
/**
* http://www.experts-exchange.com/questions/28929446/How-to-pass-geolocate-javascript-variable-to-php.html
*/
error_reporting(E_ALL);
// TERNARY OPERATOR TO GET THE REQUEST VARIABLE
$q
= !empty($_GET['q'])
? trim($_GET['q'])
: NULL
;
if (!$q) die();
// ROUND THE VALUES OF LAT,LON TO 7 DECIMAL PLACES
$arr = explode(',', $q);
$arr[0] = number_format($arr[0], 7);
$arr[1] = number_format($arr[1], 7);
// RETURN THE RESULT (OR STORE IT IN A DATABASE) HERE
$out = implode(',', $arr);
error_log("Geocode:$out");
echo $out;
The second is the client-side that lets you pan and zoom, drop a pointer, move the pointer, and finally submit the selected point to the server-side script.<!DOCTYPE html>
<!-- demo/latlon_client.php https://www.experts-exchange.com/questions/28985240/Google-maps-choose-location-using-pin.html#a41900471 -->
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
html, body {
padding:0;
margin:0;
height: 100%;
overflow:hidden;
}
#map {
width:100%;
height:100%;
}
#dataset {
position:absolute;
font-size:1.5em;
z-index:5;
top:2em;
opacity:0.8;
width:100%;
text-align:center;
display:block;
}
#geosend {
background-color:red;
color:white;
}
#target {
background-color:red;
color:white;
}
</style>
<!-- Map Script -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var marker = null;
function mapinit() {
var mapOptions = {
zoom: 5,
disableDefaultUI: false,
center: new google.maps.LatLng(40.1973201,-96.1402507),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
$("#geocode").val(event.latLng.lat() + "," + event.latLng.lng());
if (marker) { marker.setMap(null); }
marker = new google.maps.Marker({ position: event.latLng, map: map});
});
}
google.maps.event.addDomListener(window, 'load', mapinit);
</script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("#geosend").click(function(){
indata = $("#geocode").val();
$.get("latlon_server.php", {q:indata}, function(response){
$("#target").html(response);
});
});
});
</script>
<title>Latitude and Longitude (Geocode) via Google Maps</title>
</head>
<body>
<div id="dataset">
<input type="text" id="geocode" placeholder="Latitude, Longitude" />
<input type="submit" id="geosend" value="Go!" />
<div id="target"></div>
</div>
<div id="map"></div>
</body>
</html>
Have a look at those, and if you still have questions, please post back!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for help Ray. I've added the code and key to my form but when the page loads the map is not displaying correctly (see image).
The functionality is working as when I click on the map it is displaying lat / long coordinates. Can you think of a reason why the may is being displayed in grey?
Thanks
The functionality is working as when I click on the map it is displaying lat / long coordinates. Can you think of a reason why the may is being displayed in grey?
Thanks
Can you think of a reason why...Maybe if I can see your code and a link to its URL "in situ" there is something I can discern.
FWIW, showing someone a picture of a failure is a little like showing a hungry man a picture of food. We can recognize it, but can't really sink our teeth into it. Maybe provide the SSCCE so we can move forward. The scripts I posted were all tested and work correctly on my server, so we would want to look for the differences between your implementation and mine.
ASKER
I think it's something to do with the CSS. The code is exactly the same as your demo so must be an issue with my environment.
ASKER
Hi Ray, when the page is loaded I'm hiding the div and then showing it when the previous question is answered. If I don't hide the div the the map is displayed correctly. Do you know of a workaround?
Maybe if I can see your code and a link to its URL "in situ" there is something I can discern.Here's a link to the demonstration script on my server. This is the "latlon" application that I posted above:
https://iconoun.com/demo/latlon_client.php
https://developers.google.com/maps/
https://www.youtube.com/watch?v=ZE8ODPL2VPI