[html] Embed Google Map code in HTML with marker

I have several places with their latitude and longitude. I want to display them in google map. Thats ok, what i can't is to display the marker at the specific lat,long position.

e.g. if i've the following code, is it possible just to place an option to display the market as well because all the lat,long coord are comming from a database and echoed with php

<iframe width="425" height="350" frameborder="0" scrolling="no" 
        marginheight="0" marginwidth="0" 
        src="http://maps.google.mu/?ie=UTF8&amp;ll=-20.234496,57.603722&amp;spn=0.093419,0.169086&amp;t=m&amp;z=13&amp;
        output=embed"></iframe>
        <br />
        <small><a href="http://maps.google.mu/?ie=UTF8&amp;ll=-20.234496,57.603722
                  &amp;spn=0.093419,0.169086&amp;t=m&amp;z=13&amp;source=embed"
               style="color:#0000FF;text-align:left">View Larger Map
               </a>
        </small>

This question is related to html google-maps

The answer is


I would suggest this way, one line iframe. no javascript needed at all. In query ?q=,

_x000D_
_x000D_
<iframe src="http://maps.google.com/maps?q=12.927923,77.627108&z=15&output=embed"></iframe>
_x000D_
_x000D_
_x000D_


USE this , Don't forget to get a google api key from

https://console.developers.google.com/apis/credentials

and replace it

    <div id="map" style="width:100%;height:400px;"></div>

<script>
function myMap() {

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var myCenter = new google.maps.LatLng(38.224905, 48.252143);
  var mapCanvas = document.getElementById("map");
  var mapOptions = {center: myCenter, zoom: 16};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({position:myCenter});
  marker.setMap(map);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"></script>

no javascript or third party 'tools' necessary, use this:

<iframe src="https://www.google.com/maps/embed/v1/place?key=<YOUR API KEY>&q=71.0378379,-110.05995059999998"></iframe>

the place parameter provides the marker

there are a few options for the format of the 'q' parameter

make sure you have Google Maps Embed API and Static Maps API enabled in your APIs, or google will block the request

for more information check here


Learning Google's JavaScript library is a good option. If you don't feel like getting into coding you might find Maps Engine Lite useful.

It is a tool recently published by Google where you can create your personal maps (create markers, draw geometries and adapt the colors and styles).

Here is an useful tutorial I found: Quick Tip: Embedding New Google Maps