javascript - Google Maps API Stop Working when i'm include jQuery File -
there used google maps api , code works me properly. when try add jquery libary, map stops working.
i appreciate help.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>complex icons</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px; } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script type="text/javascript"> var infowindow = null; function initialize() { var mapoptions = { zoom: 10 }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); setmarkers(map, sites); infowindow = new google.maps.infowindow({ content: "loading..." }); /* var bikelayer = new google.maps.bicyclinglayer(); bikelayer.setmap(map); */ // try html5 geolocation if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function (position) { var pos = new google.maps.latlng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.infowindow({ map: map, position: pos, content: 'location found using html5.' + pos }); map.setcenter(pos); }, function () { handlenogeolocation(true); }); } else { // browser doesn't support geolocation handlenogeolocation(false); } } function handlenogeolocation(errorflag) { if (errorflag) { var content = 'error: geolocation service failed.'; } else { var content = 'error: browser doesn\'t support geolocation.'; } var options = { map: map, position: new google.maps.latlng(32.321458, 34.8531), content: content }; var infowindow = new google.maps.infowindow(options); map.setcenter(options.position); } var sites = [ ['mount evans', 32.32108, 34.85535, 4, 'this mount evans.<h1>test</h1>'], ['irving homestead', 32.315939, 34.850630, 2, 'this irving homestead.'], ['badlands national park', 32.325890, 34.85175, 1, 'this badlands national park'], ['flatirons in spring', 32.35948, 34.85370, 3, 'these flatirons in spring.'] ]; function setmarkers(map, markers) { var image = { url: 'image/red-rounded04.png', // marker 20 pixels wide 32 pixels tall. size: new google.maps.size(32, 32), origin: new google.maps.point(0, 0), anchor: new google.maps.point(17, 34), scaledsize: new google.maps.size(32, 32) }; (var = 0; < markers.length; i++) { var sites = markers[i]; var sitelatlng = new google.maps.latlng(sites[1], sites[2]); var marker = new google.maps.marker({ position: sitelatlng, map: map, title: sites[0], zindex: sites[3], html: sites[4], icon: image }); var contentstring = "some content"; google.maps.event.addlistener(marker, "click", function () { //alert(this.html); infowindow.setcontent(this.html); infowindow.open(map, this); }); } } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> and when i'm try include jquery file, it's stop work.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
there no javascript-error (the mentioned message in console warning).
you have included jquery-mobile, modify structure of document when doesn't find expected structure.
the content (#map-canvas) wrapped in div(with class .ui-page). div height isn't specified, 100% #map-canvas have no effect, because 100% calculated based on defined height of parent element(which not defined).
you see map when set height of .ui-page too(e.g. 100%), suggest start reading jquery-mobile-documentation
Comments
Post a Comment