Cant add markers to google map

Question

YO! 'Sup people :) I'm new to html so I could use some help :) I've been trying to put a google map on top of the page, to be specific height: 500/600px and width: 100%. No problem there. But, when i try to add multiple markers (as URL links n' custom icons) they dont show up..when i succeed to add markers my (autocomplete embedded) search bar dissapears :/ Can someone pls hlp me make google map with embedded autocomplete search bar and few "link" markers? Tell me what did i do wrong? I have searched for an answer bit can't seem to find it. Thank you in advance..

if someone cant read this (sry don't know how to format this right) here's link to my mega with html. No viruses, don't threat pls.

    <https://mega.co.nz/#!8lAi2I4Q!cPb3XJKccd54Qm8QtnBV2QBWt42KVDFzgI89ZnRCBJo>

And here's the same code from html:

<html>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
type="text/javascript"></script>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>                    <title>Garinfo</title>
<style>
html, body, #map-canvas {
height: 85%;
margin: 0px;
padding: 0px
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px;  /* Regular padding-left + 1. */
width: 401px;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places">            </script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(45.242629, 19.827195),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
map.fitBounds(bounds);
var location1 = new google.maps.Map.LatLng(45.239115, 19.824766)
var location2 = new google.maps.Map.LatLng(45.244517, 19.847312)
var marker1 = new google.maps.Marker({

position: Location1,
url: 'http://www.facebook.com/',
map: map
    });
var marker2 = new google.maps.Marker({
position: Location2,
url: 'http://www.google.com/',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#target {
width: 345px;
}
</style>
</head>
<body onunload="GUnload()">
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: new google.maps.LatLng(45.239115, 19.824766),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
url: 'http://www.google.com/',
map: map
});
    google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
</script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</body>
</html>

Answer 1

guy!

Analizing and testing your code I've found at least 3 problems:

1) You are adding the map twice to the page. Look at lines 69 and 159.

2) Fix the lines 112 and 113:

var Location1 = new google.maps.Map.LatLng(45.239115, 19.824766);
var Location2 = new google.maps.Map.LatLng(45.244517, 19.847312);

They were missing the ";" and the variable name didn't match the name used in the markers:

var marker1 = new google.maps.Marker({
  position: Location1,  //it should be written like this Location1
  url: 'http://www.facebook.com/',
  map: map
});

var marker2 = new google.maps.Marker({
  position: Location2, //it should be written like this Location2
  url: 'http://www.google.com/',
  map: map
});

3) The markers above (1 and 2) are not being added. Yes, it's tre. It can be for some reasons:

3.1) the function places_changed on line 86 maybe is not being called;
3.2) places.length maybe is 0, making the method return on line 90;

running the code above directly adds two markers without confusing the search field (I've moved it to outside the places_changed function, right above it, and fixed the javascript errors).

Probably you will find more problems, but this must be fixed before proceeding.

Cant add markers to google map

Question

1 answers

solution1
0 ACCPTED 2014-07-03 03:05:16

Cant add markers to google map

Question

1 answers

solution1 0 ACCPTED 2014-07-03 03:05:16

solution1
0 ACCPTED 2014-07-03 03:05:16