When I load the site everything is displayed fine, but the google map is not loaded until I resize my web browser. I am using jquery mobile.
here attached the html and script i used
<div id="map-canvas" id="map-canvas" style="width: 100%; height: 600px; padding: 0;">
</div>
<script type="text/javascript">
shopLAT[1] = 30.197932;
shopLONG[1] = -97.710452;
</script>
<!-- Google Maps -->
<script type="text/javascript">
map="";
//function loadMap() {
var latLng = new google.maps.LatLng(shopLAT[1], shopLONG[1]);
var mapOptions = {
center: latLng,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow({content: "Marker"});
var contentString = "<b>Customer:</b> George Adams";
var marker = new google.maps.Marker({
position: latLng,
map: map,
html: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
//}
$(document).ready(function(){
$("#idmaptab").bind('onClick', function() {
google.maps.event.trigger(map, 'resize');
$("#map-canvas").css("height","100%");
});
});
</script>
Try to set the map-canvas height and width in pixels. Then reload the page. See if that helps.
In css:
#map-canvas{
width: 200px;
height:200px;
}
Related
I have a simple google map with markers and infowindows (like in example at Google Maps API documentation:
<html>
<meta charset="utf-8" />
<style>
.redtext {
color: red;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></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 contentString = '<div id="content">click me<P class="iwtext">Hello world!';
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);
function aclick(){
$(".iwtext").toggleClass("redtext");
}
</script>
<body onload="initialize()">
<div id="map-canvas" style="width: 100%; height: 100%"></div>
</body>
</html>
If you try this, you will see an info window after click on a marker with link (click me) and text - Hello world. If you click on a link, text become red.
But if you close infowindow, clicking on a [X], and then open it again, you will see, that text become black again, the same problem if you click again on a marker.
Is there any ways to solve this problem with rewriting content in a infowindow?
I solve it like like this:
function aclick(){ $(".iwtext").toggleClass("redtext"); contentString = '<div id="content">' + $("#content").html() + "</div>"; infowindow.setContent(contentString); }
here is my code i have done upto this point where when i add marker and hover it infowindow appears, but all of them has the same infowindow i need it to be change for each marker, second instead of clicking on the marker it gets deleted i want to creat a custom menu box on the top of marker where there should be options to add info and delete whe i click the marker.
<html>
<head>
<title>example</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
#map_canvas {
width: 100%;
height: 500px;
background-color: #CCC;}
#menu_bar{
width: 100%;
height: 150px;
position:absolute;
bottom:0px;
background-color:#008080;
border-top:1px solid red;}
body{
padding:0px;
margin:0px;}
</style>
<!-- google maps Scripting start -->
<script type="text/javascript">
var markers = [];
function initialize() {
var myLatlng = new google.maps.LatLng(44.5403, -78.5463);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
// add marker to positon
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
// deleting
google.maps.event.addListener(marker, 'click', function(event) {
this.setMap(null);
});
// adding info window to gMaps
var infowindow = new google.maps.InfoWindow({
content: "holdings content area"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- google maps Scripting ends -->
</head>
<body>
<div id="map_canvas"></div>
<div id="menu_bar">
</div>
</body>
</html>
First create a menu or popup or whatever you want in a html copy this html into javascript variable, next create gMap infoWindow and set content to your custom design, in last step bind event to your marker and in that event open your infowindow.
var map = new google.maps.Map(document.getElementById('yourmap'), mapOptions);
var popup= '<div>Design your whatever styled popup you want</div>';
var infowindow = new google.maps.InfoWindow({
content: popup
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'ABC'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I'm using GMaps to display a map on my website. It is pretty easy to create a map with an infoWindow. However, the infoWindow only appears when the marker is clicked.
My Javascript:
var map;
$(document).ready(function(){
map = new GMaps({
div: '#map',
lat: 11.5671732,
lng: 104.92592450000006,
zoom: 15
});
map.addMarker ({
lat: 11.5671732,
lng: 104.92592450000006,
infoWindow: {
content: "<h3>D-Care Dental Clinic</h3><p class='address'>Address: No.26,St.23, <br />Sangkat Chey Chom Nas, Khan Daun Penh, Phnom Penh, Tel: 023 986836/012887601</p>"
},
});
});
After stackoverflowing, I only see people hard coding using Google map API to achieve this.
So I wonder if there is any option to display infoWindow automatically on page load without clicking on the marker?
Here's the link to my map page.
Any help would be very much appreciated.
Triggering a click on the marker should work:
google.maps.event.trigger(map.markers[0], 'click');
proof of concept fiddle
code snippet:
var map;
$(document).ready(function() {
map = new GMaps({
div: '#map',
lat: 11.5671732,
lng: 104.92592450000006,
zoom: 15
});
map.addMarker({
lat: 11.5671732,
lng: 104.92592450000006,
infoWindow: {
content: "<h3>D-Care Dental Clinic</h3><p class='address'>Address: No.26,St.23, <br />Sangkat Chey Chom Nas, Khan Daun Penh, Phnom Penh, Tel: 023 986836/012887601</p>"
},
});
google.maps.event.trigger(map.markers[0], 'click');
});
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<div id="map"></div>
infowindow.open(map,marker);
should do the trick.
It will connect better via an example, basically we will simply make infowindow.open(); a part of "initialize" function itself and call "initialize" function on map load.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(28.4387675, 77.5243212); //replace with lan and lat
var mapOptions = {
zoom: 12,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<div id="bodyContent">'+
'<p>Add information for info window here</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Contact Us'
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Now place this code in section:
<div id="map-canvas" style="height:425px; "> </div>
I want to alert latitude and longitude value based on marker position.
I am unable to do it.
I have recently started learning about google maps api. Please help me along.
In below code my marker is correctly moving between different location but not showing
their latitude and longitude values.
<html>
<head>
<base href="<%=basePath%>">
<style type="text/css">
#map_canvas {
height: 430px;
width: 980px;
position: static;
top: 100px;
left: 200px;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var marker;
function initialize() {
var latlng = new google.maps.LatLng(18.9647, 72.8258);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
if (marker == undefined){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
else{
marker.setPosition(location);
}
map.setCenter(location);
google.maps.event.addListener(marker, "click", function (event) {
alert(this.position);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
You don't want to create a separate event for displaying the event - make it part of the code that creates (or moves) the marker, as follows:
function placeMarker(location) {
if (marker == undefined){
marker = new google.maps.Marker({
position: location,
map: map,
animation: google.maps.Animation.DROP
});
}
else{
marker.setPosition(location);
}
map.setCenter(location);
alert(marker.position);
}
Rather than using an alert, you can get a much more beautiful effect by following the links given in this answer for a really cool tooltip effect. Definitely worth taking a look - the answer links both a tutorial and a demonstration.
I currently have an array of places for a custom map that I am working on. I have been trying but cannot figure out how to add the 'click' popup box over a marker. I want the white box to display the name and have an option so that a person can choose 'get directions to here'. Does anyone know how I can achieve this with more then one marker?
<!DOCTYPE html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 50% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var map;
var marker
function initialize() {
var latlng = new google.maps.LatLng(42.098687,-75.917974);
var restaurants = new Array();
restaurants = [
new google.maps.LatLng(42.898687,-75.917974),
new google.maps.LatLng(42.698687,-73.917974),
new google.maps.LatLng(42.198687,-75.917974),
new google.maps.LatLng(41.098687,-75.917974)
];
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var i = 0;
for ( i <0; i < restaurants.length;i++ ){
var marker = new google.maps.Marker({
position: restaurants[i],
map:map,
title:"Testing!"
});
popupDirections(marker);
}
}
function popupDirections(marker) {
var infowindow = new google.maps.InfoWindow(
{ content: "tests: "
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>
The pop-up box that you are talking about is called the info window in google map language.
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("your contents");
});
The above code binds a click event with your marker and opens an info window with the specified text. here marker is the marker object.
Hope it helps.
The way to do this is to create one global infowindow and then reuse it again and again, this way the infowindow is just moved to each marker, and the content of the info window can be changed using the setContent method. Read here and there is a Google Demo accessable from the api reference site. I had the same problem when I was making a map for my site,
The following code should work:
<script type="text/javascript">
var map;
var marker;
var infowindow; //Global infowindow created
function initialize() {
var latlng = new google.maps.LatLng(42.098687,-75.917974);
var restaurants = new Array();
restaurants = [
new google.maps.LatLng(42.898687,-75.917974),
new google.maps.LatLng(42.698687,-73.917974),
new google.maps.LatLng(42.198687,-75.917974),
new google.maps.LatLng(41.098687,-75.917974)
];
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow({ //infowindow options set
maxWidth: 355
});
var i = 0;
for ( i <0; i < restaurants.length;i++ ){
marker = new google.maps.Marker({
position: restaurants[i],
map:map,
title:"Testing!"
});
popupDirections(marker);
}
}
function popupDirections(marker) {
//this function created listener listens for click on a marker
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("Tests: "); //sets the content of your global infowindow to string "Tests: "
infowindow.open(map,marker); //then opens the infowindow at the marker
});
}
</script>
If you want separate content for each marker (which I assume you will) you can pass some content into the popupDirections() function, modified with a string for the content "html":
function popupDirections(marker, html) {
//this function created listener listens for click on a marker
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html); //sets the content of your global infowindow to string "Tests: "
infowindow.open(map,marker); //then opens the infowindow at the marker
});
}