Code for my google map:
<div class="contact-map fullwidth">
<iframe id="contacts-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2934.840706379279!2d23.333396514681272!3d42.643536825146064!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40aa84104363e1bf%3A0x52c1ac43c6be263a!2z0YPQuy4g4oCe0J_RitGB0YLRitGAINGB0LLRj9GC4oCcIDExLCAxNzAwINC60LIuINCS0LjRgtC-0YjQsCwg0KHQvtGE0LjRjw!5e0!3m2!1sbg!2sbg!4v1502701860622" frameborder="0" allowfullscreen></iframe>
</div>
This is how map looks, and i want to post some label with text over the arrow ? Or something else around the pin?
You can not do it with Google Maps Embed API. But you can place custom tooltip windows using Google Maps JavaScript API as shown below.
<div id="container">
<style>
#map {
height: 100%;
}
body,
html,
#container {
height: 100%;
}
</style>
<div id="map"></div>
<script>
function initMap() {
//Location
var address = {
lat: 40.730,
lng: -73.935
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: address
});
//Your custom label content
var contentString =
'<div>' +
' <h1>Title</h1>' +
' <p>This is your custom description and you can type anything here.</p>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: address,
map: map,
title: 'My Place'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
//Open overlay by default
infowindow.open(map, marker);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</div>
Related
I am trying to achieve a cluster google map with sidebar when clicking the sidebar element it needs to show the specific infowindow when selecting particular sidebar elements. I found a tutorial but it was working with external API. But i am trying to achieve is to get with the custom values. I am adding the code which i am adding here.
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBFLmEBCM9NFv4yDK6oXwDKX3FZjmvVqUk'></script>
<script type='text/javascript' src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
</head>
<body>
<div style="width:50%;float:left;">
<div id="map"></div>
<div style="width:50%; float:left;">
Hello 1
Hello 2
Hello 3
Hello 4
</div>
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 35.1264,
lng: 33.4299
}
});
var infoWin = new google.maps.InfoWindow();
// 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) {
var marker = new google.maps.Marker({
position: location,
icon:'https://www.tutorialspoint.com/google_maps/src/Picture1.png'
});
google.maps.event.addListener(marker, 'mouseover', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
// markerCluster.setMarkers(markers);
// 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: 35.1218939381583,
lng: 33.42075903167722,
info: " Hello 1"
},
{
lat: 35.11596152729056,
lng: 33.42702467193601,
info: " Hello 2"
},
{
lat: 35.116312569544064,
lng: 33.43535024871824,
info: " Hello 3"
},
{
lat: 35.11497860093425,
lng: 33.430372068786596,
info: " Hello 4"
},
];
google.maps.event.addDomListener(window, "load", initMap);
//on click function
function myClick(id) {
google.maps.event.trigger(markers[id], 'click');
}
</script>
<style>
#map {
height: 950px;
}
.map-img{float:left;}
.map-title{width:100%; float:left;}
</style>
</body>
</html>
Google Cluster works fine but the sidebar element on click it was it was not popping up the infowindow.
Markers that are "clustered" aren't added to the map. In your myClick function, add them to the map or zoom in so the clusterer "unclusters" them.
function myClick(id) {
map.setCenter(markers[id].getPosition());
map.setZoom(16);
google.maps.event.trigger(markers[id], 'mouseover'); // to display InfoWindow
}
proof of concept fiddle
code snippet:
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
#map {
height: 100%;
width: 50%;
float: right;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk'></script>
<script type='text/javascript' src='https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js'></script>
<div style="width:100%;height:100%;">
<div id="map"></div>
<div style="width:50%; float:left;">
Hello 1<br>
Hello 2<br>
Hello 3<br>
Hello 4<br>
</div>
</div>
<script>
var markers;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 35.1264,
lng: 33.4299
}
});
var infoWin = new google.maps.InfoWindow();
// 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.
markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: 'https://www.tutorialspoint.com/google_maps/src/Picture1.png'
});
google.maps.event.addListener(marker, 'mouseover', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
// markerCluster.setMarkers(markers);
// 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: 35.1218939381583,
lng: 33.42075903167722,
info: " Hello 1"
},
{
lat: 35.11596152729056,
lng: 33.42702467193601,
info: " Hello 2"
},
{
lat: 35.116312569544064,
lng: 33.43535024871824,
info: " Hello 3"
},
{
lat: 35.11497860093425,
lng: 33.430372068786596,
info: " Hello 4"
},
];
google.maps.event.addDomListener(window, "load", initMap);
//on click function
function myClick(id) {
map.setCenter(markers[id].getPosition());
map.setZoom(16);
google.maps.event.trigger(markers[id], 'mouseover');
}
</script>
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;
}
Title says it all, really. I'm trying to use the Google Maps JavaScript API to create a map with a draggable pin that defaults to the user's current geolocation as defined by the HTML5 geolocation API, but the code I'm using won't output anything at all. It's probably something really simple (I'm new to web dev, be kind!), but I can't figure out for the life of me what it is.
This is the code I'm using:
<input type="text" name="ilat" style="display: none;">
<input type="text" name="ilong" style="display: none;">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="overflow:hidden;height:500px;width:600px;">
<div id="gmap_canvas" style="height:500px;width:600px;"></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style><a class="google-map-code" id="get-map-data" /></div>
<script type="text/javascript">
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
var locmap = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
} else {
var locmap = new google.maps.LatLng(51.50532252465797, -0.14202490290529113);
}
}
function init_map() {
var myOptions = {
zoom: 16,
center: locmap,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
draggable: true,
map: map,
position: locmap)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Last known location</b> "
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
google.maps.event.addListener(marker, 'dragend', function(event) {
document.getElementById("ilat").value = this.getPosition().lat();
document.getElementById("ilong").value = this.getPosition().lng();
});
</script>
Would someone enlighten me as to what I'm doing wrong?
Thanks!
Your code is a bit of a mess, I'm afraid! There are a number of syntax errors in it, so you should always check the JavaScript Console (Hamburger->More Tools->JavaScript Console on Chrome) for help in these situations.
After the syntax errors, the main problem is that your variable scope is all wrong. Please consult this tidied-up version, and see the sample Google code here.
var locmap = new google.maps.LatLng(51.50532252465797, -0.14202490290529113);
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(locmap) {
locmap = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
},
function() {});
}
}
function init_map() {
getLocation();
var myOptions = {
zoom: 16,
center: locmap,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
draggable: true,
map: map,
position: locmap
});
infowindow = new google.maps.InfoWindow({
content: "<b>Last known location</b> "
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'dragend', function(event) {
document.getElementById("ilat").value = this.getPosition().lat();
document.getElementById("ilong").value = this.getPosition().lng();
});
}
google.maps.event.addDomListener(window, 'load', init_map);
<input type="text" name="ilat" style="display: none;">
<input type="text" name="ilong" style="display: none;">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div style="overflow:hidden;height:500px;width:600px;">
<div id="gmap_canvas" style="height:500px;width:600px;"></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style><a class="google-map-code" id="get-map-data" />
</div>
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); }
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>