I'm developing the Google Map web application using Google Map 3 library, I want to add the HTML panel when I click on button on infowindow. The panel position always beside the infowindow. Can everyone help me or give me an example to resolve it?
It looks like this:
For example I have some code, could I display the div #panel on the right of the div #content?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<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>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="btn_know_more"> Know more'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="panel">
<!--Content panel-->
</div>
</body>
</html>
Related
I'm trying to make a simple interactive map that will allow the user to select a marker type from a button outside the map, then place a single marker when the user clicks on the map. After the marker is dropped the user could reposition the map or select another marker type to add. I realize this is a pretty basic question but I just started learning. An example would be much appreciated as I am still learning the terminology. Thanks!
Here is what I have so far.
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>Simple SITTEMP</title>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=drawing" async defer>
</script>
</head>
<body onload="initialize()" style="height:100%">
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(45.401942, -110.663985);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
};
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true,
});
}
</script>
<div id="map_canvas" style="width:50%; height:50%;"></div>
<button id= "blueButton"> Add Blue Marker</button>
<button id= "redButton"> Add Red Marker</button>
</body>
</html>
Here a simple One:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>Simple SITTEMP</title>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDTQxCH5Vw9ot8amZ-3dG66_joi2mzpJqI&callback=initMap&libraries=drawing" async defer>
</script>
</head>
<body onload="initialize()" style="height:100%">
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(45.401942, -110.663985);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
var markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_green.png';
function setMarkerIconColor(color){
if (color == "blue") {markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png'};
if (color == "red") {markerIcon = 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png'};
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
icon: markerIcon,
map: map,
draggable: true,
});
}
</script>
<div id="map_canvas" style="width:50%; height:50%;"></div>
<button id= "blueButton" onclick="setMarkerIconColor('blue')"> Add blue Marker </button>
<button id= "redButton" onclick="setMarkerIconColor('red')"> Add Red Marker</button>
</body>
</html>
Hej. Google maps turns up grey in the browser, but can see the markers and the google logo in the bottom right corner.
Have tried the resize function, but still won't work.I am using bootstraps col.
I can see it works here, but it doesn't.
Thanks for the help.
function initialize() {
var myOrigin = new google.maps.LatLng(56.63914, 9.79765);
var mapProp = {
center: myOrigin,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var myCenter = new google.maps.LatLng(56.157165, 10.207644);
var marker = new google.maps.Marker({
position: myCenter,
title: 'Click to zoom'
});
marker.setMap(map);
var myCenter2 = new google.maps.LatLng(57.04661, 9.924479);
var marker2 = new google.maps.Marker({
position: myCenter2,
title: 'Click to zoom'
});
marker2.setMap(map);
/*On marker click, it zooms to 19*/
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(19);
map.setCenter(marker.getPosition());
});
google.maps.event.addListener(marker2, 'click', function () {
map.setZoom(19);
map.setCenter(marker2.getposition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#googleMap {
height:350px;
width:100%;
}
<body>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="googleMap"></div>
</div>
<script src="http://maps.googleapis.com/maps/api/js"></script>
</body>
If you check the Getting Started for JavaScript:
<!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;
}
#map {
height: 100%;
}
</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>
NOTE:
If you're using the API under the standard plan, you must use a browser key (a type of API key) set up in a project of your choice. See more about API keys for the standard API.
I'm trying to customize google map but I have a small problem.
Here is the css code:
#map-canvas {
width: 100%;
height: 500px;
}
and the js code:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And this is how I initialize the map in html. This example actually works.
<div id="map-canvas"></div>
But when I trying to put my map into some div e.g:
<div>
<div id="map-canvas"></div>
</div>
It doesn't work. How to fix that ?
/// EDIT
Please put this into example.html and try to run. Nothing happens for me.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<div id="map-canvas"></div>
</div>
</body>
</html>
Your parent div should have height and width defined.
<body>
<div style="height:100%; width:100%;">
<div id="map-canvas"></div>
</div>
</body>
Try This.
For more detail:
Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag
Nothing seems wrong in your code ,it works fine just seprated css.I have checked and tested.
DEMO
I have made a Google Version 3 Geocoder , I want to be able to pick up the coordinates of the marker when it is dragged or clicked. Below is my code:
<!DOCTYPE html>
<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>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
draggable: true,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
<style type="text/css">
#controls {
position: absolute;
bottom: 1em;
left: 100px;
width: 400px;
z-index: 20000;
padding: 0 0.5em 0.5em 0.5em;
}
html, body, #map_canvas {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body onload="initialize()">
<div id="controls">
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map_canvas"></div>
</body>
</html>
I have tried to use the following code to do this but it does not seem to work.
// Javascript//
google.maps.event.addListener(marker, 'dragend', function(evt){
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(marker, 'dragstart', function(evt){
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(marker.position);
marker.setMap(map);
//HTML//
<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>
That code works just fine if you put it in the correct place:
http://www.geocodezip.com/BlakeLoizides_geocode.html
(inside the callback routine, the marker is local to it)
I am a new android app developer and i want to use google map in my application.When user clicks on marker it should display address for particular locations.I am usig longitude and latitude.This is my code-
`
<!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="http://maps.googleapis.com/maps/api/js?key=AIzaSyA5wa4_VHXgAoUA9NOwlW-J-ibOuLc4Yaw&sensor=false">
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
// sample longitude and latitude
var locations = [
['Deolali', 20.022703,73.72811],
['Nasik Road', 20.02929,73.722362],
];
var map_center = new google.maps.LatLng(20.022703,73.72811);
var str='<h2>Deolali,Nasik Road,Nasik</h2>'
var myOptions = {
zoom: 10,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (i = 0; i < locations.length; i++) {
var store1 = new google.maps.LatLng(locations[i][1], locations[i][2]);
var infowindow = new google.maps.InfoWindow({
content: str
});
var marker1 = new google.maps.Marker({
position: store1,
map: map,
title:"Store 1"
});
google.maps.event.addListener(marker1, 'click', function() {
map.set_center(store1);
map.set_zoom(16);
marker1.openInfoWindowHtml('here I am');
infowindow.open(map,marker);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
`
Please help me out.
I used static map for may application and it really works nicely.This method uses HTML codes.You have to visit site http://maps.google.com/ and search for your city/state/country for which you want to use google map.After getting map search for your locations you want and save them as 'save to map'. Once you have done then click on Link button in left side bar and you will get html code like this,///this is example code for google map of USA,
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?msa=0&msid=216854043611115490081.0004bc7afbd6561efbeb0&ie=UTF8&ll=43.075968,-107.290284&spn=0,0&t=h&output=embed"></iframe><br /><small>View My Saved Places in a larger map</small>
You have to just paste code like this in you html file and you will get static map image with your saved locations.One more thing you can add number of locations as much as you want.