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
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>
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
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
}
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.
// 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 :/