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">