Add Marker function with Google Maps API

Question

I have the following Javascript that includes both the standard Google Maps API initialize() function and custom addMarker() function. The map will load fine however the marker does not get added to the map.

<script type="text/javascript"> // Standard google maps function function initialize() { var myLatlng = new google.maps.LatLng(40.779502, -73.967857); var myOptions = { zoom: 12, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } // Function for adding a marker to the page. function addMarker(location) { marker = new google.maps.Marker({ position: location, map: map }); } // Testing the addMarker function CentralPark = new google.maps.LatLng(37.7699298, -122.4469157); addMarker(CentralPark); </script>

Check this tutorial for complete solution. webdesignpluscode.blogspot.com.tr/2016/02/… — Waqas Ali
– Waqas Ali, Commented Jul 28, 2016 at 14:29

Harsh Baid · Accepted Answer · 2011-10-09 04:00:48Z

You have added the add marker method call outside the function and that causes it to execute before the initialize method which will be called when google maps script loads and thus the marker is not added because map is not initialized Do as below.... Create separate method TestMarker and call it from initialize.

<script type="text/javascript"> // Standard google maps function function initialize() { var myLatlng = new google.maps.LatLng(40.779502, -73.967857); 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() { CentralPark = new google.maps.LatLng(37.7699298, -122.4469157); addMarker(CentralPark); } </script>

Where are the variables declarations for map, marker and CentralPark?

Kristian · Accepted Answer · 2013-09-29 01:19:15Z

function initialize() { var location = new google.maps.LatLng(44.5403, -78.5463); var mapCanvas = document.getElementById('map_canvas'); var map_options = { center: location, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(map_canvas, map_options); new google.maps.Marker({ position: location, map: map }); } google.maps.event.addDomListener(window, 'load', initialize);

How does this answer the original question? What have you changed and why? Why did OP code not work? etc.

NorthCat · Accepted Answer · 2015-02-05 08:30:29Z

THis is other method
You can also use setCenter method with add new marker

check below code

$('#my_map').gmap3({ action: 'setCenter', map:{ options:{ zoom: 10 } }, marker:{ values: [ {latLng:[position.coords.latitude, position.coords.longitude], data:"Netherlands !"} ] } });

This has nothing to do with the original question. Please delete.

Imran · Accepted Answer · 2017-08-15 10:42:46Z

<div id="map" style="width:100%;height:500px"></div> <script> function myMap() { var myCenter = new google.maps.LatLng(51.508742,-0.120850); var mapCanvas = document.getElementById("map"); var mapOptions = {center: myCenter, zoom: 5}; var map = new google.maps.Map(mapCanvas, mapOptions); var marker = new google.maps.Marker({position:myCenter}); marker.setMap(map); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>

Collectives™ on Stack Overflow

Add Marker function with Google Maps API

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Linked

Related