javascript - Google Maps: Add a marker to the embedded Google map without their API - Stack Overflow

admin管理员组

文章数量:1022769

From google map I can get the embeded link like this:

   <iframe src="=!1m10!1m8!1m3!1d14758.879464292155!2d114.13797844999998!3d22.364204!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2shk!4v1439431516910" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

it works perfectly.The problem is I would like to add a marker on the map

e.g. a market pointing 22.364204,114.1379784 , 15z

I have tried search a while and some discussion suggested that I can use parameter &q=

so I add the parameter

&q=22.364204,114.1379784&z=15&output=embed

and the final code

<iframe src="=!1m10!1m8!1m3!1d14758.879464292155!2d114.13797844999998!3d22.364204!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2shk!4v1439431516910&q=22.364204,114.1379784&z=15&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

but the marker doesn not appear. Any ideas about that? Any approach is without using their js api?

Thanks a lot

From google map I can get the embeded link like this:

   <iframe src="https://www.google./maps/embed?pb=!1m10!1m8!1m3!1d14758.879464292155!2d114.13797844999998!3d22.364204!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2shk!4v1439431516910" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

it works perfectly.The problem is I would like to add a marker on the map

e.g. a market pointing 22.364204,114.1379784 , 15z

I have tried search a while and some discussion suggested that I can use parameter &q=

so I add the parameter

&q=22.364204,114.1379784&z=15&output=embed

and the final code

<iframe src="https://www.google./maps/embed?pb=!1m10!1m8!1m3!1d14758.879464292155!2d114.13797844999998!3d22.364204!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2shk!4v1439431516910&q=22.364204,114.1379784&z=15&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

but the marker doesn not appear. Any ideas about that? Any approach is without using their js api?

Thanks a lot

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Aug 13, 2015 at 2:30 Helmut Granda 4,71377 gold badges3737 silver badges5454 bronze badges asked Aug 13, 2015 at 2:15 user782104user782104 13.6k6060 gold badges178178 silver badges315315 bronze badges 2

• 1 Could you point us to the "discussion" you are talking about? That discussion may be solving a different issue than yours. – Helmut Granda Commented Aug 13, 2015 at 2:25
• stackoverflow./questions/10415842/… – user782104 Commented Aug 13, 2015 at 2:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Based on the link you provided it works as expected by removing the extra parameter "pb".

<iframe src="http://maps.google./maps?q=22.364204,114.1379784&z=15&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Use the Embed API. There is a wizard to help you create the map.

parameters

q=22.364204,114.1379784 (marker location)
zoom=15                 (initial zoom level)

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google./maps/embed/v1/place?q=22.364204%2C114.1379784&key=AIzaSyCF5T43TaYZfv7RLFwFPXrPNFpDiC6ffO4" allowfullscreen></iframe>

example

i use this code on html

<script src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false"></script>

on javascript

 var map;
enter code here
var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(-34.000009, -56.197645),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapCanvas = document.createElement("div");
mapCanvas.id = "canvas";
mapCanvas.style.width = "800px";
mapCanvas.style.height = "400px";
 document.body.appendChild(mapCanvas);
map = new google.maps.Map(mapCanvas, mapOptions);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-34.000009, -56.197645),
    map: map,
    title: 'marker'
 //=====You can even customize the icons here
});
}

google.maps.event.addDomListener(window, 'load', initialize);

From google map I can get the embeded link like this:

   <iframe src="=!1m10!1m8!1m3!1d14758.879464292155!2d114.13797844999998!3d22.364204!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2shk!4v1439431516910" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

it works perfectly.The problem is I would like to add a marker on the map

e.g. a market pointing 22.364204,114.1379784 , 15z

I have tried search a while and some discussion suggested that I can use parameter &q=

so I add the parameter

&q=22.364204,114.1379784&z=15&output=embed

and the final code

<iframe src="=!1m10!1m8!1m3!1d14758.879464292155!2d114.13797844999998!3d22.364204!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2shk!4v1439431516910&q=22.364204,114.1379784&z=15&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

but the marker doesn not appear. Any ideas about that? Any approach is without using their js api?

Thanks a lot

From google map I can get the embeded link like this:

   <iframe src="https://www.google./maps/embed?pb=!1m10!1m8!1m3!1d14758.879464292155!2d114.13797844999998!3d22.364204!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2shk!4v1439431516910" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

it works perfectly.The problem is I would like to add a marker on the map

e.g. a market pointing 22.364204,114.1379784 , 15z

I have tried search a while and some discussion suggested that I can use parameter &q=

so I add the parameter

&q=22.364204,114.1379784&z=15&output=embed

and the final code

<iframe src="https://www.google./maps/embed?pb=!1m10!1m8!1m3!1d14758.879464292155!2d114.13797844999998!3d22.364204!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2shk!4v1439431516910&q=22.364204,114.1379784&z=15&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

but the marker doesn not appear. Any ideas about that? Any approach is without using their js api?

Thanks a lot

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Aug 13, 2015 at 2:30 Helmut Granda 4,71377 gold badges3737 silver badges5454 bronze badges asked Aug 13, 2015 at 2:15 user782104user782104 13.6k6060 gold badges178178 silver badges315315 bronze badges 2

• 1 Could you point us to the "discussion" you are talking about? That discussion may be solving a different issue than yours. – Helmut Granda Commented Aug 13, 2015 at 2:25
• stackoverflow./questions/10415842/… – user782104 Commented Aug 13, 2015 at 2:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Based on the link you provided it works as expected by removing the extra parameter "pb".

<iframe src="http://maps.google./maps?q=22.364204,114.1379784&z=15&output=embed" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Use the Embed API. There is a wizard to help you create the map.

parameters

q=22.364204,114.1379784 (marker location)
zoom=15                 (initial zoom level)

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google./maps/embed/v1/place?q=22.364204%2C114.1379784&key=AIzaSyCF5T43TaYZfv7RLFwFPXrPNFpDiC6ffO4" allowfullscreen></iframe>

example

i use this code on html

<script src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false"></script>

on javascript

 var map;
enter code here
var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(-34.000009, -56.197645),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var mapCanvas = document.createElement("div");
mapCanvas.id = "canvas";
mapCanvas.style.width = "800px";
mapCanvas.style.height = "400px";
 document.body.appendChild(mapCanvas);
map = new google.maps.Map(mapCanvas, mapOptions);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-34.000009, -56.197645),
    map: map,
    title: 'marker'
 //=====You can even customize the icons here
});
}

google.maps.event.addDomListener(window, 'load', initialize);

本文标签： javascriptGoogle Maps Add a marker to the embedded Google map without their APIStack Overflow