I need to generate a google map with a marker.
I have the latitude and longitude code.
There's lots of scripts around but what is the quickest way to display the map on my web page using the latitude and longitude codes that I have?
This is the current code: - No map is being displayed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src=".7.2/jquery.js"></script>
<script type="text/javascript" src=""></script>
<script>
$(document).ready(function (){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($('#map'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
})
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I need to generate a google map with a marker.
I have the latitude and longitude code.
There's lots of scripts around but what is the quickest way to display the map on my web page using the latitude and longitude codes that I have?
This is the current code: - No map is being displayed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis./maps/api/js?sensor=false"></script>
<script>
$(document).ready(function (){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($('#map'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
})
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
-
$('#map')is not an HTML Element, it is a JQuery array of elements, use$('#map')[0]fiddle – geocodezip Commented Feb 1, 2016 at 19:08
2 Answers
Reset to default 8Markup
<script language=javascript src='http://maps.google./maps/api/js?sensor=false'></script>
<div id="map"></div>
Javascript
function initialize(){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
google.maps.event.addDomListener(window,'load', initialize);
Jquery
$(document).ready(function (){
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($('#map'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
The code is adding some invisible content to the map div. To view it, we need to add CSS:
#map { width: 500px; height: 400px; }