I don't what's causing this issue, I am not able to see google mp even though it's loading.
jQuery is being loaded, bootstrap classes are also being loaded.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 14.5800, lng: 121.0000}
});
}
</script>
<div id="map" style="height:450px;width:100%;"></div>
And this is how my map is being shown.
I have experienced something similar, because i have the map on a button that shows and hide it(bootstrap collapse action). How i solved: Try Showing the map without any container, if this works, check the container of the map that are you using.
It seems that the Google Maps Loading are affected by the "collapse" action of bootstrap. When i load the map without the collapse action it works, so the problem is that you have the map in "not active" or "not showing" status and the map doesn't load properly.
My Function code of the Map:
google.maps.event.addDomListener(window, 'load', initMap);
function initMap(){
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 4.619870, lng: -74.067577},
zoom: 16});
var mainmarker = new google.maps.Marker({ //Line 1
position: {lat: 4.619870, lng: -74.067577}, //Line2: Location to be highlighted
map: map,//Line 3: Reference to map object
title: 'Casa de Bolsa', //Line 4: Title to be given
icon : 'images/pin.png'
});
//console.log("map ready");
return map;
};
seems simply a wrong order of the element
try this way ( And check if sensor is effectively required.. )
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
</head>
<body>
<div id="map" style="height:450px;width:100%;"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 14.5800, lng: 121.0000}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap"></script>
</body>
try this,
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 14.5800, lng: 121.0000}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<div id="map" style="height:450px;width:100%;"></div>
standard way ref-http://www.w3schools.com/googleapi/google_maps_basic.asp
The script is defined before function so it can't find it. You can use async defer.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places,geometry&callback=initMap" async defer></script>
Related
i have problem implementing address visualization on markers within m google maps dynamic map.
My code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 44.0, lng: 12.0}
});
// Create an array of alphabetical characters used to label the markers.
var labels = '';
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: 44.5153, lng: 11.3428},
{lat: 44.4926, lng: 11.3657},
{lat: 44.4948, lng: 11.3158}
//input geocode continue
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=initMap">
</script>
</body>
</html>
I want to add on click popup information on each marker, but i cannot manage to do it, i've searched a lot but I'ven't find any working solution.
Someone can help me?
i've edited your code to let it work with info window
before, initializing the markers add this line of code
var infoWin = new google.maps.InfoWindow();
this will initialize the info window, now modify your markers initialization to this
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
//// here we are adding the event listner for the markers to open the info window on click
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
notice we are reading the info from the location array so change your locations array to include a third parameter "info" like this
var locations = [{
lat: 44.5153,
lng: 11.3428,
info: 'place 1'
}, {
lat: 44.4926,
lng: 11.3657,
info: 'place2'
}, {
lat: 44.4948,
lng: 11.3158,
info: 'place 3'
}
//input geocode continue
]
I used location marker on my address. but can't work properly for map and location marker
HTML code.
<section class="contact-map2" id="contact-map2">
</section>
Jquery code.
<!-- Jquery -->
<script src="js/jquery-3.1.1-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAT4sxB6QJ6yqBA7bve0j6wLYSHeF2NKs0&sensor=false&libraries=places"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', init);
function init() {
mapInit(11.01392086,76.96254899,"contact-map2","images/pin-house-green.png", true);
}
</script>
please help me for solve this problem.
To add a location marker use this code:
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
// You can set more attributes value here like map marker icon etc
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
<div id="map"></div>
here callback=initMap will call the initMap() on page load and render the map with location marker.
Reference
I was trying to simplify the way I add Google maps to my pages.
I'm using this markup for each map:
<div class="map" data-coordinates="-34.397, 150.644">
<div class="canvas" id="map_canvas"></div>
</div>
and this jquery code:
jQuery(function($) {
var maps = $('.map');
maps.each(function() {
var $this = $(this),
mapId = $this.find('.canvas').attr('id'),
coordinates= $this.data('coordinates');
// set map options
var mapOptions = {
center: new google.maps.LatLng(coordinates),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(document.getElementById(mapId), mapOptions);
});
});
this is a recreation of the tutorial on the google maps website.
when I do it like the tutorial it works fine, but when I use my code above I get the map controls with a grey background, I also tried jQuery(window).load(); with the same result, and the issue seems to be from each() because when I create the map without it, it works fine.
this is the code that works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
There's a problem with coordonates.
google.maps.LatLng() accepts Lat and Lng as separate params, not a composite string.
Try :
jQuery(function($) {
$('.map').each(function() {
var $this = $(this),
canvas = $this.find('.canvas').get(0),
coordinates = $this.data('coordinates').split(/,\s?/);
// set map options
var mapOptions = {
center: new google.maps.LatLng(Number(coordinates[0]), Number(coordinates[1])),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create the map
var map = new google.maps.Map(canvas, mapOptions);
});
});
You might need to test that regexp.
I'm updating some old code to Google Maps API v3, and I can't get the map to show anything. Dumping the map object to the console shows the map has been initialized properly and it is supposed to be loading in the proper div-- but nothing shows except a grey box.
I have set width/height and overflow for the map div, since this seems to be the most common problem.
However, I can't get this to work. Any ideas?
http://jsfiddle.net/Nbjrf/1/
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
#map_canvas { height: 200px; width: 400px; overflow: visible; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</body>
</html>
This works for me.
There is a big difference between
var maptype = 'google.maps.MapTypeId.HYBRID';
var mapInitOpts = {
mapTypeId: maptype
};
and
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID
};
In 1 instance you are asigning to mapTypeId the text 'google.maps.MapTypeId.HYBRID' and the other you are assigning to mapTypeId the value of the variable google.maps.MapTypeId.HYBRID.
For your example to work you should at least put
var maptype = google.maps.MapTypeId.HYBRID;
not
var maptype = 'google.maps.MapTypeId.HYBRID';
Also I cannot make my example to work without zoom: and center: . Those might be required.
You had the mapTypeId constant in quotes, 'google.maps.MapTypeId.HYBRID'; it's a constant, not a string: google.maps.MapTypeId.HYBRID
Also, you need to supply a map centre, and a zoom level. This works:
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID,
center: new google.maps.LatLng(-32.891058,151.538042),
zoom: 16
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapInitOpts);
Finally, you don't need to supply an API key any more.
The map displays 2 markers, one with geolocation coordinates and the other one with some random coordinates. I can't extend the bounds to fit both markers in the map. What's wrong? thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
<meta charset="UTF-8">
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var geolocation = new google.maps.Marker({position: pos, map: map, title: 'Your geolocation', });
var latitude=47.03249;
var longitude=28.833747;
var pos2=new google.maps.LatLng(latitude,longitude);
var geolocation2 = new google.maps.Marker({position: pos2,map: map,title: 'Your geolocation',});
var pos3=new google.maps.LatLng((position.coords.latitude+latitude)/2,(position.coords.longitude+longitude)/2);
map.setCenter(pos3);
bounds.extend(geolocation.getPosition());
bounds.extend(geolocation2.getPosition());
map.fitBounds(bounds);
},
function() {handleNoGeolocation(true);});
}
else {handleNoGeolocation(false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style='width:400px; height:400px;'></div>
</body>
</html>
your bounds needs to be a google.maps.LatLngBounds object.
You don't ever construct it.
Add (somewhere before you call extend on it):
var bounds = new google.maps.LatLngBounds();
BTW - you should be getting javascript errors that make this really clear.