The following is my asp.net code for a webpage. The intellisense is NOT picking up any of the google api commands. ie, the google in new google.maps...... is squiggly lined and the map doesnt show on the page. Yes i have a width and height set. Where am I going wrong?
<asp:Content ID="Content1" ContentPlaceHolderID="MidPageContent" runat="server" onload="initialize">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCjtIboyk_zcd4SoE9fzNoGNzt_tIqG8jY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(-34.397, 150.644);
var map = new google.maps.Map(document.getElementById('GMap'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
</script>
<div id="GMap" style="width:400px; height:400px;" >
Sorry about the width, now it's another simple question, are you calling initialize() through <body onload or
google.maps.event.addDomListener(window, 'load', initialize);
Related
I'm just starting to use Google Maps API and have run into problems with API. I am using code from Good Maps example and it works with Chrome and Firefox but nothing shows up in IE 10.
I've searched topics without help. I have added https://maps.google.com to safe site in IE, tried the v=3.28 trick, also tried meta tags for backwards compatibility, without any success.
Following is my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="map" style="width:100%;height:1200px;"></div>
<script>
function initMap() {
var myLatLng = { lat: 32.681390, lng: -97.108682 };
var map = new google.maps.Map(document.getElementById('map'), {
center: myLatLng,
zoom: 14
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap">
</script>
</body>
</html>
The above markup doesn't show any map in IE 10. I'm unable to move forward. I'm just starting out with this and wanted to use it in an updatepanel in asp.net 4.5. But at the moment, simple html isn't working for me.
Any suggestions?
Thank you.
Inside a infoBubble Google map I have added a function, but the first time the infoBubble is opened, the code not work, and if I open a second infoBubble or close the first and reopen, the code work.
Please help.
This is my page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/infobubble.js"></script>
<script>
var infoBubble = new InfoBubble();
var infowindow = new google.maps.InfoWindow();
var map;
function initialize() {
var config = {
el: 'map',
lat: 40.2329,
lon: -3.42,
zoom: 10,
type: google.maps.MapTypeId.ROADMAP
};
var data = [
['Giorgio Rossi', 40.15, -3.42, '1' ],
['Marta Bianchi', 40.25, -3.42, '2'],
['Carlo Verdi', 40.15, -3.62, '3'],
['Mario Giallo', 40.25, -3.62, '4'],
];
var map = new google.maps.Map(document.getElementById(config.el), {
zoom: config.zoom,
scrollwheel: false,
center: new google.maps.LatLng(config.lat, config.lon),
mapTypeId: config.type
});
var markers = [];
var i ;
for (i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][1], data[i][2]),
map: map
});
marker.info = '<div id="'+data[i][3]+ '">'+data[i][0]+ '</div>';
marker.html = '<div style="padding:25px"><a class="testClass" href="javascript:;" > My Friend '+data[i][3]+'</a> </div>';
google.maps.event.addListener(marker , 'click', function(){
infoBubble.setContent(this.html);
infoBubble.open(map, this);
var prova = this.info;
var found = $(prova).attr('id');
google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
$(".testClass").click(function () {
alert(found);
})
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:700px; height:500px"></div>
</body>
</html>
As you can see from this SO question and the accepted answer
your issue is related to a bug in the infobubble.js code.
More specifically, the placement of the domready trigger was in the wrong part of the code, prior to the asynchronouse setMap() call, instead of after the infobubble elements are added to the DOM in the onAdd() function (which is called after the setMap() function).
What this means is that on your FIRST marker click, at domready event, the elements hadn't yet been added to the DOM - but they were a few milliseconds later - which is why the 2nd marker click worked.
I fixed the domready placement in infobubble.js and created a pull request which has been accepted and is now merged into the official code.
If you update your infobubble.js to the latest commit (use the non-minified for the moment) you'll probably see that your issue is resolved.
Non-working JS Fiddle here using the old code.
Working JS Fiddle here using the new code.
I would like to use the following google map API snippet in my ASP.net application to retrieve the latitude and longitude of the selected point by the user.
This code show the map same as https://www.google.com/maps/#25.3812696,58.4464073,6z. Instead of the map from '.com', I want to see the map from '.ae'.
That is the map same as https://www.google.ae/maps/#25.3812696,58.4464073,6z. Both maps are from google based on the country.
Is there any way to achieve this ?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Location Tracking</title>
</head>
<body>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(24, 54),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
google.maps.event.addListener(map, 'click', function (e) {
//this part will return the coordinates to the parent page
alert("Latitude: " + e.latLng.lat() + "\r\nLongitude: " + e.latLng.lng());
});
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
With Thanks and Regards,
I played around with javascript map for a little bit and figured out that by adding &languange=ae at the end of the src, you can have a similar effect. Please check out the example for jsfiddle, and try to add language to your code src="http://maps.googleapis.com/maps/api/js?sensor=false&language=ae". Hope that works for you.
I'm trying to do something I thought quite straight forward. Obviously it's not! I use the head.js lib to asynchronously load the Google Maps API :
<!doctype html>
<html>
<head>
<title>Map - Async example</title>
</head>
<body>
<div id="id" style="width:600px;height:400px;"></div>
<script src="header.js" type="text/javascript">
<script type="text/javascript">
head.js('https://maps.googleapis.com/maps/api/js?=3.exp&sensor=false&callback=google_callback');
var google_callback = function ( ) {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('id'), mapOptions);
}
</script>
</body>
</html>
But nothing shows up. Any idea/suggestion ?
The closing script-tag for header.js is missing
I have created a test ASP.Net 4.0 application with Master \ Child page configuration to test some needed enhancements for our main application. I need to be able to put a google map inside a jQuery UI tab control. It will not be the first tab in the production version so I create a tab control with two tabs in the test app and put the map in the second tab. No matter what I did I could not get the map to display correctly in the second tab. As a test I move the map (just a div id="map-canvas" that jQuery attacks) into the first tab and walla - everything works fine - even after changing tabs and returning. Googled around a ton but cannot find a resolution for this one. Here is the map working in the first tab:
And here is the same map not working when placed in the second tab:
Here is the code:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MyAPIKey&sensor=false">
</script>
<link href="App_Themes/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>Map in Tab Control</h2>
<div id="mapTabs">
<ul>
<li>Tab-1</li>
<li>Tab-2</li>
</ul>
<div id="a"><h2>This is the first tab</h2>
</div>
<div id="b"><h2>This is the second tab</h2>
<div id="map-canvas" style="min-width:300px; min-height:300px;"></div>
</div>
</div>
<script src="Scripts/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize(lt, ln) {
var latlng = new google.maps.LatLng(lt, ln);
var map = new google.maps.Map(
document.getElementById('map-canvas'), {
center: new google.maps.LatLng(lt, ln),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latlng,
title: "Test Pin"
});
marker.setMap(map);
}
$(document).ready(function () {
$("#mapTabs").tabs();
var addr = '2626 East Oakland Park Blvd Oakland Park, FL 33306';
var gc = new google.maps.Geocoder();
var lat;
var lon;
gc.geocode({ 'address': addr }, function (results, status) {
lat = results[0].geometry.location.lat();
lon = results[0].geometry.location.lng();
initialize(lat, lon);
});
});
</script>
</asp:Content>
I know this is an old post, but here's for anybody else with similar issues:
You'll need to call your map's initialize function.
Since you're using jquery, this should work:
$("#b").click(function() {
initialize();
});