I consider myself to be an average PHP coder, but I can barely edit the few bits of JavaScript code that I need on my websites. I have an address in a PHP variable and I would like a simple map to show up on my webpage with that address. I've done some research on the internet and I find a lot op geocoding, converting an address to a location the Google API understands, but I'm completely lost. Is there no simple piece of code to in which I can embed my variables?
7 Answers
You can use an iframe and pass the address as an URL parameter.
<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?q=<?php echo $yourAddress; ?>&output=embed"></iframe>
-
1
You'll have to use the Geocoder API.
Here you go ( original can be found here ) :
<head>
...
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 12, //Change the Zoom level to suit your needs
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//map_canvas is just a <div> on the page with the id="map_canvas"
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//Your Variable Containing The Address
var address = "<?php echo $AddressVariable; ?>";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
//places a marker on every location
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
...
</head>
Add this to the opening body
tag of your page to initialize the map:
<body onload="initialize()">
And here's the documentation for the Geocoder
class.
Updated code - an API key is required nowadays. You may need to urlencode the address but it should even work without it:
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=API_KEY
&q=<?php echo $address; ?>" allowfullscreen>
</iframe>
Source: https://developers.google.com/maps/documentation/embed/get-started
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<?php
$address = str_replace(" ", "+",$address_variable);
?>
<iframe style="width:100%;height:50%;" frameborder="0" id="cusmap" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?q=<?php echo $address; ?>&output=embed"></iframe>
Here you have another example:
<div class="container rounded border shadow-sm info-property mt-4 pt-4 pl-5 pr-5 pb-2 bg-white">
<div class="row mt-3">
<div class="col-12">
<h6 class="info-property-title">Mapa:</h6>
</div>
<div class="col-12">
<iframe width="100%" height="100%"
src="https://maps.google.it/maps?q=<?php echo $map_address; ?>&output=embed"
frameborder="0"
style="border:0;"
allowfullscreen=""
aria-hidden="false"
tabindex="0"
scrolling="no"
marginheight="0"
marginwidth="0"
>
</iframe>
</div>
</div>
</div>
Embedding a Gmap
Different type of modes for google map: https://developers.google.com/maps/documentation/embed/embedding-map
Choosing map modes
You can specify one of the following map modes to use in your request URL:
place: displays a map pin at a particular place or address, such as a landmark, business, geographic feature, or town.
view: returns a map with no markers or directions.
directions: displays the path between two or more specified points on the map, as well as the distance and travel time.
streetview: shows interactive panoramic views from designated locations.
search: shows results for a search across the visible map region.
<div id="maps"></div> $(document).ready(function() { var key = 'xxxxxxxxxxxxxxxxxxxxxxxxxx'; var lat = '54.320889726653014'; var lon = '-130.30591155093268'; var addr = '<?php echo sanitize($restaurant_details['address']); ?>'; var width = 350; var height = 350; var embed= "<iframe width='"+width+"' height='"+height+"' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'src='https://www.google.com/maps/embed/v1/view?key="+key+"&zoom=18¢er="+lat+","+lon+"'></iframe>"; $('#maps').html(embed); });
These links are use full to you..not the exact link but its use full :) tc..
1)remove-address-bubble-from-google-maps-iframe
2) google maps