CODEWITHSUNDEEP
javascripthtmlgoogle-mapsiframegoogle-maps-api-3
xRobot
xRobot

Reputation: 26567

Google maps - embed a map by city name

Is there a way to embed a map by using only the city name like the code below ?

<iframe src="https://www.google.com/maps/embed?pb=Paris,France" width="600" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>

Upvotes: 0

Views: 3305

Answers (2)

shireef khatab
shireef khatab

Reputation: 1005

you can use javascript or jQuery for google map api with click events like so..

                     $('...ELEMENT, CLASS, BUTTON....').click(function(){
                        $.ajax({
                            type:"GET",
                            url:"https://maps.googleapis.com/maps/api/geocode/xml?address=...CITY NAME...&key=...YOUR KEY GOES ERE...",
                            dataType:'xml',
                            success: function(xml){

                                    }
                                });
                            }
                        });
                    });

YOU CAN USE JSON IF U PREFERE

or if u dont want the click and ajax function just copy n paste the url with ur key and city name

you can create a key from here: https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend,places_backend&keyType=CLIENT_SIDE&reusekey=true&pli=1

hope that will help.

Upvotes: 0

geocodezip
geocodezip

Reputation: 161334

Please refer to the documentation for the Embed API.

Place mode

Place mode displays a map pin at a particular place or address, such as a landmark, business, geographic feature, or town.

https://www.google.com/maps/embed/v1/place ?key=YOUR_API_KEY &q=Eiffel+Tower,Paris+France

The following URL parameter is required:

  • q defines the place to highlight on the map. It accepts a location as either a place name, address, or place ID. The string should be URL-escaped, so an address such as "City Hall, New York, NY" should be converted to City+Hall,New+York,NY. (The Google Maps Embed API supports both + and %20 when escaping spaces.) Place IDs should be prefixed with place_id:.

Example with Paris, France:

<iframe width="100%" height="600" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=Paris, France&amp;key=YOUR_API_KEY">
</iframe>

working example

Upvotes: 1

Related Questions