How to add google map dynamically
Question
I'm trying to use Google MAP API v3 with the following code.
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
<script type="text/javascript">
jQuery( function( $ )
{
var i = 1;
initMap( $( '.map' ) );
function initMap( $map )
{
google.maps.event.addDomListener( window, 'load', function()
{
var myOptions = {
center: new google.maps.LatLng( -16.920334, 145.770859 ),
zoom: 12,
};
var drawingManager = new google.maps.drawing.DrawingManager();
var map = new google.maps.Map( $map[0], myOptions );
drawingManager.setMap( map );
} );
}
$( 'body' ).on( 'click', '.add-map', function()
{
i++;
$( '.maps' ).append( '<div class="map-' + i + '" style="width: 800px; height: 500px;"></div>' );
initMap( $( '.map-' + i ) );
} );
} );
</script>
</head>
<body>
<input type="button" class="add-map" value="Add Map">
<div class="maps">
<div class="map" style="width: 800px; height: 500px;"></div>
</div>
</body>
</html>
What i want to do is when user clicks Add Map button, a map will be created dynamically. The default map is loaded but the next map isn't. How can i fix this issue, thank you!
Here is my fiddle demo
1 answers
solution1
1 ACCPTED 2015-12-11 13:09:38
This is working fiddle of your code what is wrong with your code is you open a map on window load by initMap( $( '.map' ) ); which run google.maps.event.addDomListener( window, 'load', function() and later you call same function on click that not make any sense , because this line register window load event to run function inside it's block
and appending new map in existing map also not working, that's all hope This may help
it's not complete code just a idea how this will work
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.