How to dynamically `generate` a google map base on an address ?

Question

Details

• I want to print a map base on any address that are stored in my <span>
• My address is : 410 walker street Lowell MA 01851
• My <span> is Address: <span id="address" > 410 walker street Lowell MA 01851 </span>
• I want to use Google Map API for that

What I have tried

Address: <span id="address" > 410 walker street Lowell MA 01851 </span>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- "Highlight a place or an address" -->
<iframe 

width="600" height="450" frameborder="0" style="border:0"
src="

https://www.google.com/maps/embed/v1/place?q=

410+walker+street+Lowell+MA+01851

&key=*****

">

</iframe>

Here is my result

So far so good, everything is working, and it's work because I input the address manually like this ?q = 410+walker+street+Lowell+MA+01851

but I don't want the input the address manually. How do I do this dynamically ? I need some suggestions - please.

My Approach

• I was wondering if I can store my address in a variable $address

• $address = "410 walker street Lowell MA 01851";

• and finally print them back out as "410+walker+street+Lowell+MA+01851" in part of my HTML attribute src="".

Questions

• I am not sure at all that this approach is the best practice for this.
• Is it possible ? How ?
• Can anyone help shed the light on this ?

Answer 1

I was doing similar stuff.

If you find ?pb= within the iframe url, it means that it's cached somewhere. In case you put your own address, have in mind that it needs to be geolocated (lat, lng) and the iframe itself doesn't do that for you.

It is possible to do the work without API Key you could try to do something like:

$(document).ready( function(){
    var addr = 'Any Street 670, Any City';
    function(){  

        var embed= "<iframe width='425' height='350' frameborder='0'  
        scrolling='no' marginheight='0' marginwidth='0'    
        src='https://maps.google.com/maps?&amp;q="+   
        encodeURIComponent( addr ) +  
        "&amp;output=embed'></iframe>";  

        $('.place').html(embed);
    });
});

It is working nicely for me.

For working also with coordinates, have a look at this SO question.

Answer 2

Use $.text() to retrieve the address, encode it(via encodeURIComponent), and then set the src-attribute of the iframe(by using the encoded address):

<span id="address"> 410 walker street Lowell MA 01851 </span>
<iframe id="map" width="600" height="450"></iframe>
<script  type="text/javascript">
jQuery(
  function($)
  {
       var q=encodeURIComponent($('#address').text());
       $('#map')
        .attr('src',
             'https://www.google.com/maps/embed/v1/place?key=***&q='+q);

  }
);
</script>

Demo: http://jsfiddle.net/doktormolle/pkjq1hrb/

Answer 3

<?php $address = 'Any Street 670, Any City' ; /* Insert address Here */

echo '<iframe width="100%" height="170" frameborder="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=' . str_replace(",", "", str_replace(" ", "+", $address)) . '&z=14&output=embed"></iframe>';
                            ?>

Answer 4

you wanna show location based on address that user input ? may be this will help you, but in limitation about data storing on google place server. try this code snippet, may be a little help for you.

I've edited my answer, because you're not using jquery. If you're using jquery, look at my previous revision..

var map_options = {
    center: new google.maps.LatLng(-2.548926, 118.0148634),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

var input = document.getElementById("keyword");
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo("bounds", map);

var marker = new google.maps.Marker({
    map: map,
    zoom: 14,
    animation: google.maps.Animation.BOUNCE
});

google.maps.event.addListener(autocomplete, "place_changed", function () {
    var place = autocomplete.getPlace();

    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(15);
    }

    marker.setPosition(place.geometry.location);
});

google.maps.event.addListener(map, "click", function (event) {
    marker.setPosition(event.latLng);
});

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div id="map_canvas" style="width:530px; height:250px"></div>
<label for="keyword">Location :</label>
<input type="text" name="keyword" id="keyword">

Answer 5

Depending on what you want to accomplish, if the goal is to show the visitor the nearest location of a business to their current location, then it's possible to do this using a combination of IP intel (city network) and their GPS location, on mobile.

I'm not sure how you would do this yourself from scratch, but I do know that on personalization software services like Personyze, there is a widget for it, you simply upload locations and the visitor is automatically shown the location that is closest to them. You can also offer them alternative locations nearby, etc. Worth checking out, if that's your use case.

Answer 6

If anyone needs a react solution I created this child component:

export default function Map(props) {
    const address = `${props.winery.address} ${props.winery.city}, ${props.winery.state} ${props.winery.zip}`;
    const src     = `https://maps.google.com/maps?&q="+${address}"&output=embed`;
    const Embed = () => { 
        return(
            <div>
                <iframe 
                    width="100%" 
                    height="450"
                    allowFullScreen="" 
                    loading="lazy" 
                    referrerPolicy="no-referrer-when-downgrade" 
                    src={src}
                >
                </iframe>
            </div>
        );
    }

    return(
        <>
            <Embed />
        </>
    )
}

You may need to adjust the props, the object I passed had all the necessary data.