google maps not loading new tiles on drag - javascript

New tiles are not being loaded on drag and release. Instead just the blank background is shown.
Zoom in or out will load a new map.
I'm loading the current release: http://maps.google.com/maps/api/js
<style type="text/css"> .single_map_canvas img { max-width: none; } </style>
<div class="single_map_canvas" id="single_map" style="height: 225px; width: 450px;"></div>
<script type="text/javascript">
function initialize() {
var singleLatlng = new google.maps.LatLng(37.5364,-122.2455);
var mapOptions = {
zoom: 12,
center: singleLatlng,
draggable: true
}
var map = new google.maps.Map(document.getElementById('single_map'), mapOptions);
var marker = new google.maps.Marker({
position: singleLatlng,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
UPDATE: This has to be inside the <head> tag.
<style type="text/css"> .single_map_canvas img { max-width: none; } </style>

<!DOCTYPE html>
<html>
<head>
<!-- <title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
-->
<style type="text/css"> .single_map_canvas img { max-width: none; } </style>
</head>
<body>
<div class="single_map_canvas" id="single_map" style="height: 225px;width:450px;"></div>
<script>
var map;
function initMap() {
var singleLatlng = new google.maps.LatLng(37.5364, -122.2455);
map = new google.maps.Map(document.getElementById('single_map'), {
center: singleLatlng,
zoom: 8
});
var marker = new google.maps.Marker({
position: singleLatlng,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>
</html>
hope this helps
most probably ur network is slow, i guess

Related

Why Can't I load google map? [duplicate]

This question already has an answer here:
Responsive Google Maps v3 - Cannot get 100% height
(1 answer)
Closed 5 years ago.
I am new to programming and trying to learn it. For a projecti wanted to load a google map but i have been trying since hours but cant seem to load the google map and yet I dont see any javascript errors in the console. Can anyone points me to what mistake I am doing
<!DOCTYPE html>
<html>
<head>
<title>BART</title>
<style>
body
{
height: 100%;
}
#map
{
height: 80%;
width: 60%;
}
</style>
<script src = "https://maps.googleapis.com/maps/api/js?key=mykey</script>
<script>
var map ;
//function to initialize map
var initialize = function()
{
var mapOptions = {
center :{lat: 37.775362, lng: -122.417564},
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
window.onload = initialize;
</script>
</head>
<body>
<div id ="map">
</div>
</body>
</html>
You should add CSS as
#map {
height: 400px;
width: 400px;
}
<!DOCTYPE html>
<html>
<head>
<title>BART</title>
<style>
body {
height: 100%;
}
#map {
height: 400px;
width: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?"></script>
<script>
var map;
//function to initialize map
var initialize = function() {
var mapOptions = {
center: {
lat: 37.775362,
lng: -122.417564
},
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
}
window.onload = initialize;
</script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
Please use the code provided in google map documentation.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<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>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
</html>

No errors but map is not showing in website in js only background part is visible ,

after tried a lot , I had apply previous answer but not got proper solution . Actually I want that when user enter address of location then my code must show that address on map in web . But it is not happening .
convert.js :-
geocoder=new google.maps.Geocoder();
function getCoordinates(address,callback)
{
var coordinates;
geocoder.geocode({address:address},function(results,status){
alert('Called');
coordsx=results[0].geometry.location;
//coords1=results[0].geometry.location;
coordinates=[coordsx.lat(),coordsx.lng()];
callback(coordinates);
//alert(coordinates)
})
}
testmap.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#map-canvas {
width: 700px;
height: 600px;
position: absolute;
top: 40px;
left: 360px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="convert.js"></script>
<script>
google.maps.visualRefresh=true;
function initialize() {
var mapOptions;
getCoordinates('J-24 MIG colony indore',function(coords){
mapOptions = {
center: new google.maps.LatLng(coords[0],coords[1]),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
alert('Func')
alert(mapOptions.center);
});
map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" height="100%" width="100%%"></div>
</body>
</html>
The line map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions); needs to be inside the anonymous function function(coords){.. where mapOptions is defined. This should work:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#map-canvas {
width: 700px;
height: 600px;
position: absolute;
top: 40px;
left: 360px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="convert.js"></script>
<script>
google.maps.visualRefresh=true;
function initialize() {
var mapOptions;
getCoordinates('J-24 MIG colony indore',function(coords){
mapOptions = {
center: new google.maps.LatLng(coords[0],coords[1]),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" height="100%" width="100%%"></div>
</body>
</html>
The problem is that you had not put map object so it happens try to put these in your code ,
map=new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
It will surely work

Splitting page into JS/CSS/HTML

I would like to break this code into one JS, CSS and HTML file each. How could I do that?
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
You can move the Javascript (contents between scripts tags) to a separate file, for example
<script src="scripts/myscripts.js"></script>
Similarly you can move the CSS (contents between style tags and embed it like this:
<link rel="stylesheet" href="my.css" />
So your Javascript file would look like this:
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
and your CSS file like this:
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}

Draggable Icon Not Showing on top of the Google Map and not Duplicating

How can I implement draggable icons markers using this Google Maps Example
So far I have the code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places search box</title>
<style>
html, body, #map-canvas {
height: 93%;
width: 90%;
margin: 10px;
padding: 10px
}
#panel {
position: absolute;
top: 1%;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#target {
width: 345px;
}
#shelf{position:absolute; top: 0px; left:980px; height:100%;width:30%; float: right; background:white;opacity:0.7;}
#draggable {position:absolute; top:10px; left:10px; width: 30px; height: 30px;z-index:1000000000;}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script type="text/javascript">
var $map;
var $latlng;
var overlay;
// This example adds a search box to a map, using the
// Google Places autocomplete feature. People can enter geographical searches.
// The search box will return a pick list containing
// a mix of places and predicted search terms.
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.3333, -121.9000),
new google.maps.LatLng(37.3333, -121.9000));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap($map);
}
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="shelf">
<img src="https://cdn1.iconfinder.com/data/icons/lightly-icons/30/location.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
</div>
<div id="map-canvas"></div>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
</body>
</html>
If you load up the code, you will notice that the icon can be dragged only once. Also, when I try to drag the icon ONTO the map, the icon is dragged BEHIND the map and can not be seen. Any suggestions on what I am doing wrong? I have a feeling this piece of code is part of the problem...
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
Let me know.
NOTE: Below is the map that works with a draggable icon, BUT I want to implement this same method onto the search map that I have above. Thus, I am trying to combine the draggable function from the map below onto the search map above that I got from the Google Map Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Demo Map</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
width: 70%;
height: 100%;
}
#shelf{position:absolute; top: 0px; left:980px; height:100%;width:30%; float: right; background:white;opacity:0.7;}
#draggable {position:absolute; top:10px; left:10px; width: 30px; height: 30px;z-index:1000000000;}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script type="text/javascript">
var $map;
var $latlng;
var overlay;
function initialize() {
var $latlng = new google.maps.LatLng(37.32758, -121.89246);
var myOptions = {
zoom: 19,
center: $latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT },
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
panControl:false,
};
$map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap($map);
}
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: $map,
draggable:true,
icon: icon
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id='shelf'>
<img src="https://cdn1.iconfinder.com/data/icons/lightly-icons/30/location.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
</div>
</body>
</html>
I'm close but any ideas on what's wrong?
There are 2 tricks to avoid dragging behind the map. On the draggable item use these options:
helper: "clone",
appendTo: "body"
By appending to body, the cloned helper will be the newest item created, and will be on top of the map.

need the search box to not refresh the page so the function will load the marker

// html
<!DOCTYPE html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
// load google map
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js? key=&sensor=true">
</script>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(33.319914, 44.304771);
var marker = new google.maps.Marker({map: map, position:myLatlng, title:"Hello World!"});
var map = null;
function initialize()
{
var mapOptions =
{
center: new google.maps.LatLng(33.319914, 44.304771),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// marker.setMap(map);
}
// second map with marker
function initialize2()
{
var mapOptions =
{
center: new google.maps.LatLng(33.319914, 44.304771),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<head>
<body>
<div id="map-canvas"/>
</div>
// button works to load second map
<button onclick="initialize2()">Enter ID</button>
// form will load second map but refreshs page and goes back to first map without marker
<form name="searchbox">
<input type="text" class="searchbox" name="searchterm"/>
<input type="image" src="images/opacbox1.png" class="searchbox_submit" value="Search"" ONCLICK="Javascript:doSearch()" onsubmit="javascript:doSearch()" />
<script type="text/javascript">
function doSearch()
{
searchvalue = document.searchbox.searchterm.value
if (searchvalue == "1")
{
initialize2();
}
else
{
alert("no good");
}
}
</script>
</body>
</html>
// if there is a better way to load markers with the seachbox or button im all ears been trying all day
// css
body
{
}
#map-canvas
{
height: 500px;
width: 500px;
margin: 50px 50px 50px 50px;
}
#searchwrapper
{
width:310px;
height:40px;
background-image:url('images/searchbox6.png');
background-repeat:no-repeat;
padding:0px;
margin:0px;
position:relative;
}
#searchwrapper form
{
display: inline;
}
.searchbox
{
border:0px;
background-color:transparent;
position:absolute;
top:4px;
left:9px;
width:256px;
height:28px;
color: #fff;
}
.searchbox_submit
{
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:265px;
width:32px;
height:28px;
}
stop the form from summiting, like this:
$('#upload').submit(function(e){
e.preventDefault();
...
});
Hope this helps :/

Categories