问题描述:

The modal pop up when you click 'View Map' next to the postcode on this page here isn't displaying the map.

I had this working earlier, but can't seem to make it work in a different location even though the code is the same.

Here's the html/jscript:

<ul class="contact address clearfix">

<li><a href='#myModal' role='button' data-toggle='modal'>View Map</a></li>

</ul>

<!-- Map Modal -->

<div id="myModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h3 id="myModalLabel">Map and Directions</h3>

</div>

<div class="modal-body">

<div id='map-canvas'></div>

</div>

<div class="modal-footer"></div>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?q=London&key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script>

<script type="text/javascript">

var map;

var marker = null;

function initialize() {

var mapOptions = {

zoom: 15,

center: new google.maps.LatLng(-34.397, 150.644),

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var geolocate = function(address, callback) {

$.ajax({

url: "http://maps.googleapis.com/maps/api/geocode/json",

data: {

"sensor": true,

"address": address

},

dataType: "json",

success: function(d) {

if (d.status == "ZERO_RESULTS") callback(false);

if (d.results && d.results[0] && d.results[0].geometry) {

callback({

"ne": d.results[0].geometry.bounds.northeast,

"sw": d.results[0].geometry.bounds.southwest,

"center": d.results[0].geometry.location

});

}

else callback(false);

}

});

};

map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);

geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) {

if(marker == null) {

marker = new google.maps.Marker({

map: map,

clickable: false //remove if you want it clickable

});

}

marker.setPosition(new google.maps.LatLng(c.center.lat, c.center.lng));

});

}

google.maps.event.addDomListener(window, 'load', initialize);

$('#myModal').on('shown', function () {

google.maps.event.trigger(map, 'resize');

map.setCenter(marker.getPosition()); //Center on your marker or replace it if you want to center it elsewhere

});

</script>

<!-- End Map Modal -->

Any ideas appreciated

网友答案:

You are getting the following error in console:

Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors. 

This means that you have included the api more than once, maybe in the main page and then in the modal? try removing one of the instances you have loaded and check if that solves your problem.

相关阅读:
Top