Develop Reference

Error with Script

I am getting an Add Marker is undefined when using this script but I can't seem to figure out the issue. Any suggestions to remedy this error is greatly appreciated:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 700px; height: 400px"></div>
<script type="text/javascript">
var latlng = new google.maps.LatLng(40.756, -73.986);
var options = {
center : latlng,
zoom : 1,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map'), options);
var geocoder = new google.maps.Geocoder();
var marker= new google.maps.Marker(null);
function AddMarker(address)
{
geocoder.geocode( {'address' : address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
//map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker( {map : map,position : results[0].geometry.location });
var infowindow;
if (!infowindow)
{
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent(address);
google.maps.event.addListener(marker, 'click', function()
{
infowindow.open(map,marker);
});
}
});
}
</script>

It looks like you have called the function "Add Marker" and not "AddMarker(target)"
you call infowindow just right the declaration of it.

It might be that you call AddMarker too early.
https://jsfiddle.net/c472zjqc/
var latlng = new google.maps.LatLng(40.756, -73.986);
var options = {
center: latlng,
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map'), options);
var geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker(null);
function AddMarker(address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infowindow;
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent(address);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
});
}
AddMarker('Wichita, KS');
map.setZoom(3);
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 700px; height: 400px"></div>

Jquery not loading the map in Wordpress

I'm using the jquery to load the Google Maps. The map doesn't load the right location until I refresh the page many times.
Here's the script:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function codeAddress(address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new MarkerWithLabel({
position: results[0].geometry.location,
map: map,
labelContent: address,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {
opacity: 1.0
}
});
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
}
initialize();
Any idea what I'm missing here? Thanks for any and all suggestions!

Simple Geocoding Map in JQuery

How do I make a simple map in Jquery that plots only one location. Here is the code I have now. this plots an array of locations, but I just need a simple map that will plot one point in Lng,Lat format. I am using the google geocoder for this.
var geocoder;
var map;
var markersArray = [];
var bounds;
var infowindow = new google.maps.InfoWindow({
content: ''
});
function initialize() {
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
var myOptions = {
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder.geocode({
'address': '5th Avenus New Yort'
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
bounds.extend(results[0].geometry.location);
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
plotMarkers();
}
var locationsArray = [
['Google Official', '1600 Amphitheatre Parkway, Mountain View, USA'],
['Google 1', '112 S. Main St., Ann Arbor, USA'],
['Google 2', '10 10th Street NE, Suite 600 USA']
];
function plotMarkers() {
var i;
for (i = 0; i < locationsArray.length; i++) {
codeAddresses(locationsArray[i]);
}
}
function codeAddresses(address) {
geocoder.geocode({
'address': address[1]
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(address[0]);
infowindow.open(map, this);
});
bounds.extend(results[0].geometry.location);
markersArray.push(marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
map.fitBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I then call this in my file with:
<body>
<div id="map_canvas" style="width: 100%; height: 700px;"></div>
</body>
</html>
I need the new map to plot one lat and lng point along with posting the listing the location in the textbook as above. I can not figure out how to do this without an array.

It seems like you're using an example that shows multiple markers.
I haven't tested it, but I think this JavaScript is close:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
geocoder.geocode( { 'address': '5th Avenue New York' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Review this for more information: https://developers.google.com/maps/documentation/javascript/geocoding

Google Maps V3: initialize Streetview + geocoding

Daer All I have set Google Maps in my project and work fine. Now I would like to initialize the following script with "Street View Panorama" instead of stardard map.
I have found an exemple on google developers but I'm not able to combinate it with the geocoding function.
So what if I would like to initialize street view instead of standard map in this code?
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}//*I need street view instead of standard map (StreetViewPanorama)
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
html
<div id="map-canvas" style="width: 600px; height: 450px; float:right"></div>
<div>
<input id="address" type="text" value="Milan, Italy Viale Tunisia 30">
</div>

Retrieve address from HTML element and create Google Map with it

I have an element on my page which I have assigned the ID 'address' to:
<p id="address">1600 Pennsylvania Ave NW, Washington, DC 20500, United States</p>
Now I am trying to create a Google map from it using the following:
<script type="text/javascript">
var gecoder, map;
var address = document.getElementById('address').innerHTML;
function googlemap(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 8,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
}
</script>
However this returns nothing. I get a blank. Any idea what i am doing wrong?

This is what I did and it works. JavaScript in the head:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" />
<script type="text/javascript">
var geocoder, map;
function googlemap() {
var address = document.getElementById('address').innerHTML;
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myPosition = results[0].geometry.location;
alert(myPosition);
var myOptions = {
zoom: 8,
center: myPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), myOptions);
var marker = new google.maps.Marker({
map: map,
position: myPosition
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
The body:
<body onload="googlemap()">
<form id="form1" runat="server">
<div>
<p id="address">1600 Pennsylvania Ave NW, Washington, DC 20500, United States</p>
<div id="map" style="overflow:hidden; width:400px; height:400px"></div>
</div>
</form>