Google Map - getting error while loading - javascript

In my website, when I'm doing the design the google map was worked. After the hosting it shows an error:
Oops! Something went wrong"
I tried to find the solution and found API key is missing. I had created a key with my personal Gmail account and added to footer place like below.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=my api key=google-map" type="text/javascript"></script>
But after that also it didn't work. below is my google map script in HTML and js.
//Google Map
var latitude = $('#google-map').data('latitude')
var longitude = $('#google-map').data('longitude')
function initialize_map() {
var myLatlng = new google.maps.LatLng(latitude,longitude);
var mapOptions = {
zoom: 14,
scrollwheel: false,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var contentString = '';
var infowindow = new google.maps.InfoWindow({
content: '<div class="map-content"><ul class="address">' + $('.address').html() + '</ul></div>'
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize_map);
});
<div id="google-map" class="wow fadeIn" data-latitude="13.0938666" data-longitude="80.202357" data-wow-duration="1000ms" data-wow-delay="400ms"></div>

Related

Why I am not able to turn on location in browser for my JavaScript app?

I have created an app with javascript that uses the current location and I have build the app on top of SharePoint. I am using the above code. If I run this app in Sharepoint I am not able to use the location, Location Blocked to protect your privacy I am not able to turn on location because it is readonly;
I cannot use the location even in my phone I am not able to turn on the location. Why sharepoint sites wont be able to use location?
Please help me
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (p) {
var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var mapOptions = {
center: LatLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
});
google.maps.event.addListener(marker, "click", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(marker.title);
infoWindow.open(map, marker);
});
});
} else {
alert('Geo Location feature is not supported in this browser.');
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
Geolocation is only allowed over https: on modern browsers.

google map not showing up my location

I would like to show a location on google map, but I don't know where is my wrong. not showing any thing :
<div id="map-canvas" style="width:100%; height:300px;">
</div>
.
.
.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// Google map
if ($('#map-canvas').length) {
var
GOOGLE_MAP_LAT = 40.7564971,
GOOGLE_MAP_LNG = -73.9743277;
var map,
service;
jQuery(function($) {
$(document).ready(function() {
var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setMap(map);
$('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
});
});
});
}
</script>
</body>
updated
my console messages :
Using //# to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.js:1:0
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.[Learn More] <unknown>
SyntaxError: expected expression, got '<' myjs.js:1:0
TypeError: $(...).position(...) is undefined
custom.js:308:20
Use of getPreventDefault() is deprecated. Use defaultPrevented instead.
I think you need include jquery library, because you are using $(document).ready(function() .
I have updated your code by adding jquery library. Please try the below code , hope it will work.
<div id="map-canvas" style="width:100%; height:300px;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// Google map
if ($('#map-canvas').length) {
var
GOOGLE_MAP_LAT = 40.7564971,
GOOGLE_MAP_LNG = -73.9743277;
var map,
service;
jQuery(function($) {
$(document).ready(function() {
var latlng = new google.maps.LatLng(GOOGLE_MAP_LAT, GOOGLE_MAP_LNG);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setMap(map);
$('a[href="#google-map-tab"]').on('shown.bs.tab', function(e) {
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
});
});
});
}
</script>

How do I add geolocation to this code?

I am currently trying to add geolocation functionality to the following code:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(51.507059, -0.122631);
var options = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var html = "<table/>" +
"<tr><td>Name:</td><td><input id='name' type='text'/></td></tr>" +
"<tr><td><br/>Description:</td><td><input id='description' type='text'/></td></tr>" +
"<tr><td/><td><br/><center><input onclick='saveData()' type='button' value='Save & Close'/></center></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Geolocation Code:
// 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.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: Locations services failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(51.507059, -0.122631),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
However, when I attempt to merge the initialize functions, I get the error 'Cannot read property '_e3' of undefined.' If I keep the functions separate, the program simply ignores the geolocation code. So, I'm stuck, and was hoping someone could give me a hand. Thanks a million!
Note: I have tried everything relevant at https://developers.google.com/maps/, and have checked through all of the very similar questions on this site - this is not a duplicate post. Also, please ignore my use of HTML character codes inside the JavaScript - it's the only way to get HTML (infowindow) inside JavaScript (code) inside HTML (webdata) working.

Both custom and original markers are showing google maps api v3

For some reason I have both markers showing.. http://picpaste.com/Screen_Shot_2013-10-02_at_10.55.41_AM-qKfxgyCO.png
There's also a box surrounding the whole thing. Any ideas why these would be showing up?
var gmap;
function initialize() {
var myLat = new google.maps.LatLng(33.991447,-84.09403);
var mapOptions = {
zoom: 13,
center: myLat,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var gmap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mapIcon = '../fw/img/map-marker-lowres.png';
var infowindowContent ='<div class="mapbox"><p><strong>The Arena at Gwinnett Center</strong></p>' + '<p>6400 Sugarloaf Pkwy<br>Duluth, GA 30097<br>(770) 813-7500</p>' + '> get driving directions</div>';
var infowindow = new google.maps.InfoWindow({
content: infowindowContent,
maxWidth: 250,
});
var marker = new google.maps.Marker({
position: myLat,
icon: mapIcon,
map: gmap
});
marker.setMap(gmap);
infowindow.open(gmap,marker);
}
The general answer (now that you have asked the right question) is that the standard InfoWindow can't be styled the way you want. You need to use a third party library like InfoBubble or InfoBox or create your own custom InfoWindow replacement.

Unable to add marker in Google Maps Api v3

Since yesterday I'm trying to add marker in Google Maps Api v3 . I read the documentation and all. Here's my code :
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(28.63, 77.21),
zoom: 8,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
// google.maps.event.addDomListener(window, 'load', initialize);
function getFillingDetails(){
var vehicleId = $('#selectVehicle option:selected').val();
$.getJSON('getFillingDetails.php', {id : vehicleId}, function(data){
var lat = [];
var lon = [];
var price = [];
$.each(data, function(key, value){
lat.push(value.latitude);
lon.push(value.longitude);
price.push(value.price);
});
});
var myLatlng = new google.maps.LatLng(23.72,77.10);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
map: map,
});
}
</script>
Everything looks fine to me. The initialize() function is called after onload of body tag.
And getFillingDetails() function is called when I click a button.
But still I'm getting no success.
You have a syntax error at:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
map: map, <--- get rid of this comma
});
next time you should look in the developer console for any errors.
// To add the marker to the map, call setMap();
marker.setMap(map);
source : https://developers.google.com/maps/documentation/javascript/markers

Categories