How to dynamically "generate" google database by address?

Question

More details

• I want to print the base of maps on the address anythat is stored in my<span>
• My address: 410 walker street Lowell MA 01851
• My <span>-Address: <span id="address" > 410 walker street Lowell MA 01851 </span>
• I want to use the Google Map API for this

What i 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 works, and it works, because I enter the address manually like this ?q = 410+walker+street+Lowell+MA+01851

but I don’t want to enter the address manually. How to do it dynamically? I need suggestions - please.

My approach

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

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

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

Questions

• I am not sure if this approach is the best practice for this.
• ? ?
• - ?

Answer 1

$.text() , ( encodeURIComponent), src - iframe ( ):

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

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

Answer 2

.

?pb= URL- iframe, , - . , , (lat, lng), iframe .

, API, - :

$(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);
    });
});

.

SO.

Answer 3

, ? , , google place. , .

, jquery. jquery, .

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

Hide result

Answer 4

<?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 5

, , , , IP intel ( ) GPS, .

, , , , Personyze, , , , . .. , .