Link to home
Start Free TrialLog in
Avatar of j789
j789Flag for United Kingdom of Great Britain and Northern Ireland

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
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Have you tried any of the examples that Google presents?  Where in your code are you "stuck?"
https://developers.google.com/maps/
https://www.youtube.com/watch?v=ZE8ODPL2VPI
Avatar of j789

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.
<?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;

Open in new window

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>

Open in new window

Have a look at those, and if you still have questions, please post back!
ASKER CERTIFIED SOLUTION
Avatar of Ray Paseur
Ray Paseur
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of j789

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).

User generated 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
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.
Avatar of j789

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.
Avatar of j789

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