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); }
Related
I got a question regarding this code for googlemaps for my website. My website is pretty big (350 pages) and I am using a website that saves me a lot of time by quickly creating code without me manually writing it.
However this website injects some links in their code for advertisement and backlinks (https://www.acadoo.de/de-ghostwriter-bachelorarbeit.html'>Ghostwriter Bachelorarbeit).
What should I remove from this snippet to get rid of it without making whole code non workable? This is my first question on this website, Im sorry if this is a common question and I didnt find an answer.
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDvV9lr4YTbExSlhYI2e26aTEaoY2peUwE'></script>
<div style='overflow:hidden;height:280px;width:1382px;'>
<div id='gmap_canvas' style='height:280px;width:1382px;'></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style>
</div> <a href='https://www.acadoo.de/de-ghostwriter-bachelorarbeit.html'>Ghostwriter Bachelorarbeit</a>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=274228f8880db3e0b587b128af8f2a5a49d26d62'></script>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(47.4464864, 9.526921600000037),
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.4464864, 9.526921600000037)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>Klinik Am Rosenberg</strong><br>Hasenbühlstrasse 11<br>9410 Heiden<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
Looks like you need to remove both of these lines:
<a href='https://www.acadoo.de/de-ghostwriter-bachelorarbeit.html'>Ghostwriter Bachelorarbeit</a>
<script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=274228f8880db3e0b587b128af8f2a5a49d26d62'></script>
working code snippet:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDvV9lr4YTbExSlhYI2e26aTEaoY2peUwE'></script>
<div style='overflow:hidden;height:280px;width:1382px;'>
<div id='gmap_canvas' style='height:280px;width:1382px;'></div>
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style>
</div>
<script type='text/javascript'>
function init_map() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(47.4464864, 9.526921600000037),
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(47.4464864, 9.526921600000037)
});
infowindow = new google.maps.InfoWindow({
content: '<strong>Klinik Am Rosenberg</strong><br>Hasenbühlstrasse 11<br>9410 Heiden<br>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
In this case, isn't the only thing you want to remain the link?
<a href='https://www.acadoo.de/de-ghostwriter-bachelorarbeit.html'>Ghostwriter Bachelorarbeit</a>
From the snippet, the rest appears to setup to display the maps (reference the API (script tag), setup the 'canvas' (div tag) and then authorize/invoke (last two script tags).
Note the first line might be used on other pages as well if you have multiple references (othwerwise all should be able to be removed I would expect):
Is this what you were looking for?
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>
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;
}
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 have these two lines
map.panTo(respectiveMarker.getPosition());//Center in map the respective marker
infoWindow.open(map, respectiveMarker);
When infoWindow.open is executed the map pans to the edge.
If i remove this line the map pans to the marker as expected.
Any ideas?
Since you're using the v3 API you could simply prevent the infoWindow from shifting the map with the disableAutoPan option.
Complete example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps disableAutoPan Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 200px; height: 200px"></div>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(37.44, -122.14);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: 'Test',
disableAutoPan: true
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Test Marker'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
</script>
</body>
</html>
Screenshot:
There is no equivalent to the disableAutoPan in the v2 API's GInfoWindowOptions, and I am not aware of any workarounds for this.