Inclusão de Google Maps

[jsmoraes]

Click the button to get your position.

Coordenadas   Decimal   

Latitude  :
Longitude:

Coordenadas Cartesiana 

Latitude  :   
Longitude:   

Try It

Código Fonte:

Tendo pré-definida as coordenadas:

O código iframe é fornecido pelo próprio Google Map. Podemos alterar seu tamanho nas tags width e height.

<nabble_embed>
<p>Static Map</p>
<img src="http://maps.googleapis.com/maps/api/staticmap?center=-22.928897,-42.411552&zoom=16&size=400x300&sensor=false">
<p>Satellite Map </P>
<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d6459.093295761581!2d-42.411552!3d-22.928897!3m2!1i1024!2i768!4f13.1!5e1!3m2!1spt-BR!2sbr!4v1466464870152" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
<p>Dynamic Map</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d7349.115760329531!2d-42.411552!3d-22.928897!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-BR!2sbr!4v1466466107039" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</nabble_embed>

Código Completo

<nabble_embed><p id="demo">Click the button to get your position.</p>

<b>Coordenadas &nbsp; Decimal</b>&nbsp;&nbsp;&nbsp;<input  type="radio"  name="coord" id="chkDec"  value="dec" checked onclick="tipoCoordenada()"><p>
Latitude &nbsp;: <input  type="text"  id="lat" name="Lat" value="-22.928897" size="9"><br>
Longitude: <input type="text" id="long" name="Long" value="-42.411552"size="9"><br><br/>

<b>Coordenadas Cartesiana</b>&nbsp;<input  type="radio"  id="chkCart" name="coord" value="cart" ><p>
Latitude &nbsp;: <input  type="text"  id="latgrau"  value="-22" size="2">&nbsp;<input  type="text"  id="latmin"  value="55" size="1">&nbsp;<input  type="text"  id="latsec"  value="44" size="1"><br>
Longitude: <input type="text" id="longgrau"  value="-42"size="2">&nbsp;<input type="text" id="longmin"  value="24"size="1">&nbsp;<input type="text" id="longsec"  value="40" size="1"><br><br/>

<button onclick="showPosition()">Try It</button><p>
<div id="mapholder" style="margin:0px 0px 0px 50px"></div><p><div id="ifr" style="margin:0px 0px 0px 50px"></div><p><div id="gogle" style="margin:0px 0px 0px 50px"></div></nabble_embed>

<script>
var x = document.getElementById("demo");


function showPosition() {
//    var latlon = -22.928897 + "," + -42.411552;
if (document.getElementsByName("coord")[0].checked){
    var lt = document.getElementById("lat").value;
    var lg = document.getElementById("long").value;
    }else{
     var min = document.getElementById("latmin").value;
     var sec = document.getElementById("latsec").value;
    var lt = document.getElementById("latgrau").value+"."+Math.round((((min * 60)+eval(sec)) /3600)*1000000);

     var min = document.getElementById("longmin").value;
     var sec = document.getElementById("longsec").value;
    var lg = document.getElementById("longgrau").value+"."+Math.round((((min * 60)+eval(sec)) /3600)*1000000);
//document.getElementById("lat").value = document.getElementById("longgrau").value+"."+Math.round((((min * 60)+eval(sec)) /3600)*1000000);
    }
var latlon = lt + "," + lg;
    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=16&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
document.getElementById("ifr").innerHTML = "<iframe src='https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d6459.093295761581!2d" + lg +"!3d"+ lt + "!3m2!1i1024!2i768!4f13.1!5e1!3m2!1spt-BR!2sbr!4v1466464870152' width='400' height='300' frameborder='0' style='border:0' allowfullscreen></iframe>"
document.getElementById("gogle").innerHTML = "<iframe src='https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d7349.115760329531!2d"+lg+"!3d"+lt+"!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-BR!2sbr!4v1466466107039' width='400' height='300' frameborder='0' style='border:0' allowfullscreen></iframe>"
}

</script>