M
M
Max Darkleviathan2019-11-07 13:18:54
JavaScript
Max Darkleviathan, 2019-11-07 13:18:54

How to display a google map on a page using the address from the database and the presence of an api key?

If it's not difficult for anyone to share a ready-made solution.
There is an address that is stored in the database.
Suppose I output using the $adress variable
And there is a Maps JavaScript API key . It is
necessary to generate a map based on this data, perhaps someone has already come across it.
I've been using this solution for a long time, but now it doesn't work.

<input id='address' value='$adress' type='hidden'>
<div style=' width: 100%; height: 400px;' id='map_canvas'></div>

<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script>
$(document).ready(function(){
        var geocoder;
        var map;
        var address = $('#address').val();
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(45.0392674, 38.987221);
            var myOptions = {
                zoom: 16,
                center: latlng,
                mapTypeControl: true,
                mapTypeControlOptions: {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                navigationControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
            if (geocoder) {
                geocoder.geocode({
                    'address': address
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                            map.setCenter(results[0].geometry.location);
  
                            var infowindow = new google.maps.InfoWindow({
                                content: '<b>' + address + '</b>',
                                size: new google.maps.Size(150, 50)
                            });
  
                            var marker = new google.maps.Marker({
                                position: results[0].geometry.location,
                                map: map,
                                title: address
                            });
                            google.maps.event.addListener(marker, 'click', function() {
                                infowindow.open(map, marker);
                            });
  
                        } else {
                            alert('No results found');
                        }
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    });
</script>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question