I'm using WIX to edit my site and I would like to change the Google Map when I click on an item in the list on the left. The list on the left is a drop down. When I click on the item inside the drop down, I'd like it to center on that item I clicked.
Does anyone know if this is possible?
Pasting the code below into a "HTML Code" box (More > HTML & Flash > HTML Code), gives me the map on this page:
<div id="map" style="height: 500px; width: 400px; float:left;"></div>
<div id="sidebar" style="height: 500px; width: 250px; float: right;"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var markers = [];
var map;
var infoWin;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
infoWin = new google.maps.InfoWindow();
createMarker(new google.maps.LatLng( -34.397, 150.644), "place1", "stuff for IW", map);
createMarker(new google.maps.LatLng( -33.9, 151.1), "place2", "stuff for IW2", map);
}
google.maps.event.addDomListener(window, 'load', initMap);
function createMarker(latlng, name, html, map) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent("<h3>"+name+"</h3>"+html);
infoWin.open(map,marker);
});
markers.push(marker);
document.getElementById('sidebar').innerHTML += ''+name+'<br>';
}
</script>
Related
I have a problem with google map, we have a website where we have introduced a map using the api , the problem is that the map when it is initialized comes in gray, he is blamed for resizing , but I can not solve. The map is initially hidden , and jquery by clicking on a field in a table shown.
enter code here
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#googleMap {
width: 100%;
height: 470px;
margin-top: 6.5%;
overflow: visible;
max-width: none !important;
}
</style>
</head>
<div id="googleMap"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=[key]&signed_in=false&">
</script>
<script>
var myCenter = new google.maps.LatLng(39.287649, -0.422548);
var myCenterverd = new google.maps.LatLng(39.287413, -0.422255);
var myCenterroig = new google.maps.LatLng(39.288497, -0.423953);
var myCentergroc = new google.maps.LatLng(39.287766, -0.421604);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.287413, -0.422255),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapOptions);
//var marker=new google.maps.Marker({position:myCenter,icon:'gotaico.png'});
var markerverd = new google.maps.Marker({
position: myCenterverd,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicoverd.png'
});
var markerroig = new google.maps.Marker({
position: myCenterroig,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicoroig.png'
});
var markergroc = new google.maps.Marker({
position: myCentergroc,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicogroc.png'
});
//marker.setMap(map);
markerverd.setMap(map);
markerroig.setMap(map);
markergroc.setMap(map);
}
//google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(map) {
setTimeout('initialize()', 2000);
google.maps.event.addListener(map, "idle", function(){
google.maps.event.trigger(map, 'resize');
this.map.setZoom( this.map.getZoom() - 1 );
this.map.setZoom( this.map.getZoom() + 1 );
});
});
</script>
</html>
Probably you should set the backgroundColor to transparent in the mapOptions.
var mapOptions = {
center: new google.maps.LatLng(39.287413, -0.422255),
zoom: 10,
backgroundColor: 'transparent',
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
I have been using the Google Developers Tutorial on how to add a map to my website:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map#the_finished_code
I cannot seem to find a way to add a pin to the map, I have used the "centre" function so that the map is centred on the lat and long of the pin, but the pin itself is not visible.
Any way to create a pin at that lat and long?
Just need to instantiate a marker Object and place it at the coordinates:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {lat: 44.5403, lng: -78.5463};
var mapOptions = {
center: new google.maps.LatLng(myLatLng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, 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 id="map"></div>
</body>
</html>
Fiddle
Try the following:
replace center with location
before:
center: new google.maps.LatLng(myLatLng),
after:
location: new google.maps.LatLng(myLatLng),
That should do the trick (should add the Pin automatically).
Trying to do a simple position marker on a Google map imbed. Everything looks right, but not working.
<link rel="stylesheet" type="text/css" href="default.css"/>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322,-82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714,-82.9121331),
map: map
});
</script></head>
The map is loading fine, but no marker is found.
You need to create the marker inside the initialize function (where the map variable exists).
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322, -82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714, -82.9121331),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Yes, you need to initialize the marker object inside the initialize() method of the code. One way is how geocodezip has demoed. Here is one more way if you want to write modular code.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.0501322, -82.914233);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
GoldenGatePark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(GoldenGatePark);
}
</script>
Here you have added a marker in the TestMarker function and the TestMarker function is called in the initialize() method. You can just change the values of LatLng in the TestMarker function code.
I want to display a custom location with an icon and a label on the Google map in my web site.
In the head section Insert the following JS library and the coding. Change LatLng to match your exact location.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(7.316306, 80.622160);
var mapOptions = {
zoom: 14,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'My new location is this :P'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And in the body section insert this div where you want the map to be displayed.
<div id="map-canvas" width="350" height="271"></div>
Im building a site for a friend of mine and im having a hell of time trying to get the map marker to show up, I gotta admit im not much for java coding but Ive done my share of it. Im a designer and 3d motion graphics artist.
Im currently working on this template in Dreamweaver CC and I chose it cause thats how Ive been constructing sites for years.
So he gave me a template that he wanted me to use 427_timeline (its A freebie).
The modified version of this template can be seen here http://johnnybobs3ddesignz.com/
My first time but works the same pretty much. Heres My code, if someone could help me Id appreciate that so much, it would be mighty groovy dude ;)
<script>
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng(34.073809, -118.323371),
zoom: 15,
scrollwheel: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("templatemo-map")
,mapOptions);
var location = new google.maps.LatLng(34.073809, -118.323371);
var contentString = '<h2>Runyon Investment & Realty</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: mylatLng,
title: 'Runyon Investment & Realty',
visible: true
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', function()
{
map.setCenter(center);
});
</script>
I get two javascript errors with your code as is:
Uncaught ReferenceError: mylatLng is not defined
Uncaught ReferenceError: map is not defined
Because mylatLng is not defined in your code (you define location) and map is local to your initialize function
Working code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(34.073809, -118.323371),
zoom: 15,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("templatemo-map"), mapOptions);
var location = new google.maps.LatLng(34.073809, -118.323371);
var contentString = '<h2>Runyon Investment & Realty</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: location,
title: 'Runyon Investment & Realty',
visible: true
});
marker.setMap(map);
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#templatemo-map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="templatemo-map" style="border: 2px solid #3872ac;"></div>
Just use this link
https://developers.google.com/maps/documentation/javascript/
to get desired informations.
for example use the following snippet.
They use the
map - option
in the init of the marker. Just try that in your code too.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</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>
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 id="map-canvas"></div>
</body>
</html>