Created
December 12, 2023 12:59
-
-
Save banarsiamin/bbbefd2b89de7ac6c8d382350692fc69 to your computer and use it in GitHub Desktop.
Google Maps API Show Marker using address or coordinates
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Geocode with Google Maps</title> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> | |
| <meta charset="utf-8"> | |
| <style> | |
| html, body, #map-canvas { | |
| height: 100%; | |
| margin: 0px; | |
| padding: 0px | |
| } | |
| </style> | |
| <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> | |
| <script> | |
| function initialize() { | |
| <?php | |
| if(isset($_GET['address'])){ | |
| // YOUR DOMAIN API KEY | |
| $api_key = $_GET['api_key']; | |
| // SET ADDRESS | |
| $address = urlencode($_GET['address']); | |
| // URL TO HTTP REQUEST | |
| $link = "https://maps.googleapis.com/maps/api/geocode/json?address=".$address."&key=".$api_key."&sensor=false&oe=utf8"; | |
| // WE GET FILE CONTENT | |
| $page = json_decode(file_get_contents($link), TRUE); | |
| $status = $page['status']; | |
| if($status!="OK"){ | |
| $location = "0, 0"; | |
| }else{ | |
| $result = $page['results'][0]; | |
| $location = $result['geometry']['location']; | |
| $location = $location['lat'].", ". $location['lng']; | |
| } | |
| print "var myLatlng = new google.maps.LatLng(".$location.");"; | |
| }else{ | |
| print "var myLatlng = new google.maps.LatLng(".$_GET['lat']." ,".$_GET['long'].");"; | |
| } | |
| ?> | |
| var mapOptions = { | |
| zoom: 13, | |
| disableDefaultUI:true, | |
| panControl: false, | |
| scrollwheel: false, | |
| draggable: false, | |
| keyboardShortcuts: false, | |
| disableDoubleClickZoom: true, | |
| center: myLatlng | |
| } | |
| var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); | |
| var marker = new google.maps.Marker({ | |
| position: myLatlng, | |
| map: map, | |
| icon: 'mylocation.png', | |
| title: <?php echo $_GET['title']; ?> | |
| }); | |
| } | |
| google.maps.event.addDomListener(window, 'load', initialize); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="map-canvas"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment