My code is displaying markers on every output location but i want to display address over marker.I mean when user click the marker the address will have to appear above marker.How i can achieve this task? I have only latitude and longitude not address.
test.php:
<?php
$sql=<<<EOF
SELECT * from markers;
EOF;
$result = $db->query($sql);
$yourArray = array();
$index = 0;
while($row = $result->fetchArray(SQLITE3_ASSOC) ){
$json[] = array(
'lat' => $row['latitude'],
'lon' => $row['longitude'],
'name' => $row['name']
);
}
$db->close();
?>
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 50%;
}
</style>
</head>
<body>
<h3></h3>
<div id="map" align="left"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDj38Snh4MEIsomOlTZfARryo7V8A_qk9o&callback=initMap">
</script>
<?php json_encode($json, JSON_PRETTY_PRINT) ?>
<script type="text/javascript">
function initMap() {
var locationsJSON = <?php echo json_encode($json, JSON_PRETTY_PRINT) ?>;
var locations = locationsJSON;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(31.5546, 74.3572),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, i;
for (i = 0; i < locations.length; i++) {
console.log(locations[i]);
var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
}
}
</script>
</body>
</html>
If all you have is the coordinates (latitude and longitude), your only option is to use the reverse geocoder:
(from that documentation):
The term geocoding generally refers to translating a human-readable address into a location on a map. The process of doing the converse, translating a location on the map into a human-readable address, is known as reverse geocoding.
However (unless the code you posted is not the area you are planning on mapping) the area of your map doesn't seem to produce reliable reverse geocode results. So I would suggest you populate the database with the address as well as the coordinates.
fiddle using reverse geocoded results in the infowindow
code snippet:
function initMap() {
var locationsJSON = [
{lat: 31.564614,lon: 74.298718},
{lat: 31.563892,lon: 74.300435},
{lat: 31.565546,lon: 74.297597},
{lat: 31.565332,lon: 74.296744},
{lat: 31.565332,lon: 74.296744},
{lat: 31.565272,lon: 74.297637},
{lat: 31.562347,lon: 74.296712}];
var locations = locationsJSON;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(31.5546, 74.3572),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);
marker = new google.maps.Marker({
position: myLatLng,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
var mark = this;
geocoder.geocode({
location: evt.latLng
}, function(results, status) {
if (status == "OK") {
infowindow.setContent(results[0].formatted_address + "<br>" + results[0].geometry.location.toUrlValue(6));
infowindow.open(map, mark);
}
});
});
};
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Related
I want to put more markers on the map. The problem is that the map is not loaded and gives me the errors:
"SyntaxError: missing: after property id" "uncaught exception: Object"
<html>
<head>
<!-- styles put here, but you can include a CSS file and reference it instead! -->
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a map variable
var map;
var markers = [];
// Function to initialize the map within the map div
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.74135, lng: -73.99802},
zoom: 14
});
var locations = [
{title: 'Markerul', location: {lat: 40,7713024, lng: -73.9632393}},
{title: 'Markerul', location: {lat: 40,7713024, lng: -73.9632393}}
];
var largeInfowindow = new google.maps.InfoWindow();
for(var i = 0; i<locations.length; i++){
var positions = locations[i].location;
var title = locations[i].title;
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: i
});
markers.push(marker);
// onclick
marker.addListener('click', function (){
populateInfoWindow(this, largeInfowindow);
});
}
function populateInfoWindow(marker, infowindow){
// verifica daca fereastra de info nu este deja deschisa
if(infowindow.marker !=marker){
infowindow.marker = marker;
infowindow.setContent('<div>' + marker.title + '</div>');
infowindow.open(map, marker);
infowindow.addListener('closeclick', function(){
infowindow.setMarker(null);
});
}
}
var largeInfowindow = new google.InfoWindow();
var bounds = new google.maps.LatLngBounds();
// crearea unei arii de markere
for (var i = 0; i < locations.length; i++){
// ia pozitia
var position = locations[i].location;
var title = locations[i].title;
//crearea unui marker per locatie si punerea lui in aria de markere
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: i
});
//push the marker to our array of markers
markers.push(marker);
//extinderea ariei pt markere
bounds.extend(marker.position);
//onclick
marker.addListener('click', function (){
populateInfoWindow(this, largeInfowindow);
});
}
map.fitBounds(bounds);
}
</script>
<!--TODO: Insert your API Key in the below call to load the API.-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&key=MY_API_KEY&callback=initMap">
</script>
</body>
</html>
The web page should display some markers getting the latlong from a vector i created. I have tried some solutions I've found online but did not manage to solve the issue.
You have a typo on these lines:
var locations = [
{title: 'Markerul', location: {lat: 40,7713024, lng: -73.9632393}},
{title: 'Markerul', location: {lat: 40,7713024, lng: -73.9632393}}
];
the comma after 40 should be a period:
var locations = [
{title: 'Markerul', location: {lat: 40.7713024, lng: -73.9632393}},
{title: 'Markerul', location: {lat: 40.7713024, lng: -73.9632393}}
];
Then a new error: Uncaught (in promise) TypeError: google.InfoWindow is not a constructor
Another typo:
var largeInfowindow = new google.InfoWindow();
Should be:
var largeInfowindow = new google.maps.InfoWindow();
code snippet:
<html>
<head>
<!-- styles put here, but you can include a CSS file and reference it instead! -->
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create a map variable
var map;
var markers = [];
// Function to initialize the map within the map div
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.74135, lng: -73.99802},
zoom: 14
});
var locations = [
{title: 'Markerul', location: {lat: 40.7713024, lng: -73.9632393}},
{title: 'Markerul', location: {lat: 40.771, lng: -73.963393}} // make locations different
];
var largeInfowindow = new google.maps.InfoWindow();
for(var i = 0; i<locations.length; i++){
var positions = locations[i].location;
var title = locations[i].title;
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: i
});
markers.push(marker);
// onclick
marker.addListener('click', function (){
populateInfoWindow(this, largeInfowindow);
});
}
function populateInfoWindow(marker, infowindow){
// verifica daca fereastra de info nu este deja deschisa
if(infowindow.marker !=marker){
infowindow.marker = marker;
infowindow.setContent('<div>' + marker.title + '</div>');
infowindow.open(map, marker);
infowindow.addListener('closeclick', function(){
infowindow.setMarker(null);
});
}
}
var largeInfowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
// crearea unei arii de markere
for (var i = 0; i < locations.length; i++){
// ia pozitia
var position = locations[i].location;
var title = locations[i].title;
//crearea unui marker per locatie si punerea lui in aria de markere
var marker = new google.maps.Marker({
map: map,
position: position,
title: title,
animation: google.maps.Animation.DROP,
id: i
});
//push the marker to our array of markers
markers.push(marker);
//extinderea ariei pt markere
bounds.extend(marker.position);
//onclick
marker.addListener('click', function (){
populateInfoWindow(this, largeInfowindow);
});
}
map.fitBounds(bounds);
}
</script>
<!--TODO: Insert your API Key in the below call to load the API.-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
</body>
</html>
i am using this src http://maps.googleapis.com/maps/api/js?sensor=false in this how can i change the zoom in my application when i run it automatically shows my pointer can u help
This is what i tried:
<script>
var map = null;
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var markers = [
/*{
"lat": '12.916517',
"lng": '79.132499',
}
,
{
"lat": '12.5904049',
"lng": '78.62851409999999',
},*/
<?php
$long = $rider->lng;
$lat = $rider->lat;
$routes = array("lng" => $long, "lat" => $lat);
$route_points = array($routes);
foreach ($route_points as $points) {
?>
{
"lat": <?php echo "'" . $points['lat'] . "'"; ?>,
"lng": <?php echo "'" . $points['lng'] . "'"; ?>,
},
<?php
}
?>
];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(
parseFloat(markers[0].lat),
parseFloat(markers[0].lng)),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Intialize the Path Array
var path = new google.maps.MVCArray();
//Intialize the Direction Service
var service = new google.maps.DirectionsService();
//Set the Path Stroke Color
var poly = new google.maps.Polyline({map: map, strokeColor: '#4986H7'});
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
}
</script>
my output:
enter image description here
If you want to set a different zoom value when creating the map, use the zoom property in the mapOptions object as per the API documentation: google.maps.Map, google.maps.MapOptions
It can not be done by php, you can do it by Javascript:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false®ion=AU">
</script>
<script type="text/javascript">
function HomeControl(controlDiv, map) {
google.maps.event.addDomListener(zoomout, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0){
map.setZoom(currentZoomLevel - 1);}
});
google.maps.event.addDomListener(zoomin, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21){
map.setZoom(currentZoomLevel + 1);}
});
}
var map;
var markersArray = [];
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
var mapOptions = {
zoom: <?php echo $zoom; /* you can set zoom variable according to your need */ ?>,
center: myLatlng,
Marker: true,
panControl: false,
zoomControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
<div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>
</body>
</html>
I have a map where there can be n number of marker plotted on the google map, when the user draw the polygon on the map I need to know the makers plotted inside the polygon.
I tried to draw the polygon on the map which is as shown below
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> </script>
<style>
html,body{height:100%;margin:0}
#map_canvas{height:90%;}
</style>
<script>
function initialize() {
var myLatLng = {lat: 52.5498783, lng: 13.425209099999961};
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){
//do it with the right mouse-button only
if(e.button!=2)return;
//the polygon
poly=new google.maps.Polyline({map:map,clickable:false});
//move-listener
var move=google.maps.event.addListener(map,'mousemove',function(e){
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map,'mouseup',function(e){
google.maps.event.removeListener(move);
var path=poly.getPath();
poly.setMap(null);
poly=new google.maps.Polygon({map:map,path:path});
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
Use the right mouse-button to draw an overlay<br/>
<div id="map_canvas"></div>
</body>
</html>
use right mouse button to draw
for now I have only one marker, how to find the number of markers inside the polygon and their latitude and longitude the polygons can be of any shape on the map.
You could utilize containsLocation() function to determine whether marker is located inside a polygon or not.
This example draws a green polygon when the marker falls outside of the specified polygon, and a red polygon when the marker falls inside the polygon.
function initialize() {
var myLatLng = { lat: 52.5498783, lng: 13.425209099999961 };
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(map.getDiv(), 'mousedown', function (e) {
//do it with the right mouse-button only
if (e.button != 2) return;
//the polygon
var poly = new google.maps.Polyline({ map: map, clickable: false });
//move-listener
var move = google.maps.event.addListener(map, 'mousemove', function (e) {
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map, 'mouseup', function (e) {
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
poly = new google.maps.Polygon({ map: map, path: path });
var resultColor = google.maps.geometry.poly.containsLocation(marker.getPosition(), poly) ? 'green' : 'red';
poly.setOptions({ fillColor: resultColor, strokeOpacity: 0.5 });
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body {
height: 100%;
margin: 0;
}
#map_canvas {
height: 90%;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&libraries=geometry"> </script>
Use the right mouse-button to draw an overlay<br />
<div id="map_canvas"></div>
To get the number of markers inside the polygon, one option is to keep references to them in array, then iterate through that array checking to see if the marker is in the polygon or not. To determine if a marker is inside the polygon, the geometry library poly namespace method containsLocation can be used:
var markerCnt = 0;
for (var i = 0; i < markers.length; i++) {
if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), poly)) {
markerCnt++;
}
}
document.getElementById('numberMarkers').innerHTML += "There are " + markerCnt + " markers in the polygon<br>";
proof of concept fiddle
code snippet:
var markers = [];
function initialize() {
var myLatLng = {
lat: 52.5498783,
lng: 13.425209099999961
};
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(52.5498783, 13.425209099999961),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
markers.push(marker);
google.maps.event.addListener(map, 'bounds_changed', makeRandomMarkers);
var poly;
google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) {
//do it with the right mouse-button only
if (e.button != 2) return;
//the polygon
if (poly && poly.setMap) {
poly.setMap(null);
}
poly = new google.maps.Polyline({
map: map,
clickable: false
});
//move-listener
var move = google.maps.event.addListener(map, 'mousemove', function(e) {
poly.getPath().push(e.latLng);
});
//mouseup-listener
google.maps.event.addListenerOnce(map, 'mouseup', function(e) {
google.maps.event.removeListener(move);
var path = poly.getPath();
poly.setMap(null);
poly = new google.maps.Polygon({
map: map,
path: path
});
var markerCnt = 0;
for (var i = 0; i < markers.length; i++) {
if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), poly)) {
markerCnt++;
}
}
document.getElementById('numberMarkers').innerHTML = "There are " + markerCnt + " markers in the polygon<br>";
});
});
}
function getRandom(min, max) {
return Math.random() * (max - min + 1) + min;
}
google.maps.event.addDomListener(window, 'load', initialize);
function makeRandomMarkers() {
var bounds = map.getBounds();
var maxLat = bounds.getNorthEast().lat(); // 70;
var minLat = bounds.getSouthWest().lat(); // 37;
var maxLong = bounds.getNorthEast().lng(); // 50;
var minLong = bounds.getSouthWest().lng(); // -8;
for (var j = 0; j < 50; j++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(getRandom(minLat, maxLat),
getRandom(minLong, maxLong)),
map: map
});
markers.push(marker);
}
}
html,
body {
height: 100%;
margin: 0
}
#map_canvas {
height: 90%;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
Use the right mouse-button to draw an overlay
<br/>
<div id="numberMarkers"></div>
<div id="map_canvas"></div>
Map markers not displaying at all whats the error m using lat long from the database
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(<?PHP echo json_encode($output,JSON_NUMERIC_CHECK)?>);
var poss = new google.maps.LatLng(15,78);
var mapOptions = {
zoom: 4,
center: poss
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
for(i = 0;i < myLatlng.length;i++ ) {
var marker = new google.maps.Marker({
position:new google.maps.LatLng( myLatlng[i][0], myLatlng[i][1]),
map: map,
});
};
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Your problem is the definition of the myLatlng array. Remove the google.maps.LatLng from around that array (a google.maps.LatLng takes two numbers, not an array).
<script>
function initialize() {
var myLatlng = <?PHP echo json_encode($output,JSON_NUMERIC_CHECK)?>;
var poss = new google.maps.LatLng(15,78);
var mapOptions = {
zoom: 4,
center: poss
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
for(i = 0;i < myLatlng.length;i++ ) {
var marker = new google.maps.Marker({
position:new google.maps.LatLng( myLatlng[i][0], myLatlng[i][1]),
map: map,
});
};
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
working code snippet (no PHP):
var myLatlng = [
[8.6, 105.65],
[14, 109.38],
[16.83, 108.62],
[8.3, 104.88],
[8.97, 106.88]
];
function initialize() {
var poss = new google.maps.LatLng(15, 78);
var mapOptions = {
zoom: 4,
center: poss
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < myLatlng.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(
myLatlng[i][0],
myLatlng[i][1]),
map: map,
});
bounds.extend(marker.getPosition());
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
body,
html,
#map_canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
I have multiple markers in my map.
How to create a listener to multiple markers and get their latitude and longitude?
When I tried that event listener at one marker, it works. But when I tried that event listener with my multiple marker, it doesnt work.
Here is my code :
var jakarta = new google.maps.LatLng(-6.211544, 106.845172);
var shelterpoint = [];
var shelterName = [];
<?php while ($row = mysql_fetch_array($result)) { ?>
shelterpoint.push(new google.maps.LatLng(<?=$row['Latitude']?>, <?=$row['Longitude']?>));
shelterName.push("<?=$row['Shelter_Name']?>");
<?php } ?>
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: jakarta
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
drop();
google.maps.event.addListener(marker, "click", function (event) {
alert(this.position);
});
}
function drop() {
for (var i = 0; i < shelterpoint.length; i++) {
setTimeout(function() {
addMarker();
}, i * 10);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: shelterpoint[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
title:shelterName[iterator]
}));
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
Please refer the link below.
http://jsfiddle.net/xJ26V/1/
var mapOptions = {
center: new google.maps.LatLng(-33.92, 151.25),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};